@shipit-ai/cli 1.167.0 → 1.168.0

package/dist/src/presentation/web/components/features/settings/settings-page-client.js

@@ -1,17 +1,16 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useTransition, useRef, useEffect, useCallback } from 'react';
-import { Check, Bot, Terminal, GitBranch, Activity, Bell, Flag, Database, Globe, Settings2, Timer, MessageSquare, LayoutGrid, } from 'lucide-react';
+import { Check, Bot, Terminal, GitBranch, Activity, Bell, Flag, Database, Timer, MessageSquare, LayoutGrid, } from 'lucide-react';
 import { toast } from 'sonner';
 import { useTranslation } from 'react-i18next';
 import { cn } from '../../../lib/utils.js';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '../../ui/select.js';
 import { Badge } from '../../ui/badge.js';
 import { updateSettingsAction } from '../../../app/actions/update-settings.js';
-import { Language, TerminalType, } from '../../../../../../packages/core/src/domain/generated/output.js';
+import { TerminalType, } from '../../../../../../packages/core/src/domain/generated/output.js';
 import { getEditorTypeIcon } from '../../common/editor-type-icons.js';
 import { AgentModelPicker } from '../../features/settings/AgentModelPicker/index.js';
-import { LanguageSettingsSection } from '../../features/settings/language-settings-section.js';
 import { CiSettingsSection } from '../../features/settings/ci-settings-section.js';
 import { StageTimeoutsSettingsSection } from '../../features/settings/stage-timeouts-settings-section.js';
 import { InteractiveAgentSettingsSection } from '../../features/settings/interactive-agent-settings-section.js';
@@ -30,7 +29,6 @@ const DEFAULT_SHELL_OPTIONS = [
     { id: 'fish', name: 'Fish', available: true },
 ];
 const SECTIONS = [
-    { id: 'language', labelKey: 'settings.sections.language', icon: Globe },
     { id: 'agent', labelKey: 'settings.sections.agent', icon: Bot },
     { id: 'environment', labelKey: 'settings.sections.environment', icon: Terminal },
     { id: 'workflow', labelKey: 'settings.sections.workflow', icon: GitBranch },
@@ -191,13 +189,13 @@ export function SettingsPageClient({ settings, shipitAiHome, dbFileSize, availab
         void el.offsetHeight;
         el.style.animation = 'section-flash 1s ease-out';
     }, []);
-    return (_jsxs("div", { "data-testid": "settings-page-client", className: "max-w-5xl", children: [_jsx("div", { className: "bg-background/95 supports-backdrop-filter:bg-background/80 sticky top-0 z-10 grid grid-cols-1 gap-x-5 pt-6 pb-4 backdrop-blur lg:grid-cols-[1fr_280px]", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Settings2, { className: "text-muted-foreground h-4 w-4" }), _jsx("h1", { className: "text-sm font-bold tracking-tight", children: t('settings.title') }), _jsxs("span", { className: "relative h-4 w-16", children: [_jsx("span", { className: cn('text-muted-foreground absolute inset-0 flex items-center text-xs transition-opacity duration-300', showSaving ? 'opacity-100' : 'opacity-0'), children: t('settings.saving') }), _jsxs("span", { className: cn('absolute inset-0 flex items-center gap-1 text-xs text-green-600 transition-opacity duration-300', showSaved && !showSaving ? 'opacity-100' : 'opacity-0'), children: [_jsx(Check, { className: "h-3 w-3" }), t('settings.saved')] })] }), _jsx("nav", { className: "ml-auto flex items-center gap-0.5", children: SECTIONS.map((s) => {
-                                const SectionIcon = s.icon;
-                                const isActive = activeSection === s.id;
-                                return (_jsxs("button", { type: "button", onClick: () => scrollToSection(s.id), className: cn('flex cursor-pointer items-center gap-1 rounded-md px-1.5 py-1 text-[11px] transition-all', isActive
-                                        ? 'bg-accent text-foreground font-medium'
-                                        : 'text-muted-foreground/60 hover:text-foreground hover:bg-accent/50'), children: [_jsx(SectionIcon, { className: "h-3 w-3" }), _jsx("span", { className: "hidden sm:inline", children: t(s.labelKey) })] }, s.id));
-                            }) })] }) }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("div", { id: "section-language", className: "grid scroll-mt-18 grid-cols-1 gap-x-5 rounded-lg lg:grid-cols-[1fr_280px]", children: _jsx(LanguageSettingsSection, { language: settings.user?.preferredLanguage ?? Language.English }) }), _jsxs("div", { id: "section-agent", className: "grid scroll-mt-18 grid-cols-1 gap-x-5 rounded-lg lg:grid-cols-[1fr_280px]", children: [_jsx(SettingsSection, { icon: Bot, title: t('settings.agent.sectionTitle'), description: t('settings.agent.sectionDescription'), testId: "agent-settings-section", children: _jsx(SettingsRow, { label: t('settings.agent.agentAndModel'), description: t('settings.agent.agentAndModelDescription'), htmlFor: "agent-model-picker", children: _jsx(AgentModelPicker, { initialAgentType: agentType, initialModel: settings.models.default, mode: "settings", onAgentModelChange: (newAgent) => setAgentType(newAgent), className: "w-55" }) }) }), _jsx(SectionHint, { links: [
+    return (_jsxs("div", { "data-testid": "settings-page-client", className: "max-w-5xl px-8 pt-8", children: [_jsxs("div", { className: "bg-background/95 supports-backdrop-filter:bg-background/80 sticky top-0 z-10 pb-4 backdrop-blur", children: [_jsxs("div", { className: "mb-4 space-y-1.5", children: [_jsx("span", { className: "text-[10px] font-bold tracking-[0.2em] text-slate-400 uppercase", children: "Developer Portal" }), _jsxs("div", { className: "flex items-baseline gap-3", children: [_jsx("h1", { className: "text-foreground text-3xl font-black tracking-tight", children: t('settings.title') }), _jsxs("span", { className: "relative h-4 w-16", children: [_jsx("span", { className: cn('text-muted-foreground absolute inset-0 flex items-center text-xs transition-opacity duration-300', showSaving ? 'opacity-100' : 'opacity-0'), children: t('settings.saving') }), _jsxs("span", { className: cn('absolute inset-0 flex items-center gap-1 text-xs text-green-600 transition-opacity duration-300', showSaved && !showSaving ? 'opacity-100' : 'opacity-0'), children: [_jsx(Check, { className: "h-3 w-3" }), t('settings.saved')] })] })] })] }), _jsx("nav", { className: "bg-card editorial-shadow flex flex-wrap items-center gap-0.5 rounded-lg p-1", children: SECTIONS.map((s) => {
+                            const SectionIcon = s.icon;
+                            const isActive = activeSection === s.id;
+                            return (_jsxs("button", { type: "button", onClick: () => scrollToSection(s.id), className: cn('flex cursor-pointer items-center gap-1 rounded-md px-2 py-1.5 text-[11px] font-bold transition-all', isActive
+                                    ? 'bg-muted text-primary shadow-sm ring-1 ring-slate-200/70 dark:ring-slate-700/50'
+                                    : 'text-muted-foreground hover:text-foreground hover:bg-accent/50'), children: [_jsx(SectionIcon, { className: "h-3 w-3" }), _jsx("span", { className: "hidden sm:inline", children: t(s.labelKey) })] }, s.id));
+                        }) })] }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { id: "section-agent", className: "grid scroll-mt-18 grid-cols-1 gap-x-5 rounded-lg lg:grid-cols-[1fr_280px]", children: [_jsx(SettingsSection, { icon: Bot, title: t('settings.agent.sectionTitle'), description: t('settings.agent.sectionDescription'), testId: "agent-settings-section", children: _jsx(SettingsRow, { label: t('settings.agent.agentAndModel'), description: t('settings.agent.agentAndModelDescription'), tooltip: "Changing the agent switches which AI CLI tool runs your features. Each agent has different capabilities, speed, and cost tradeoffs.", htmlFor: "agent-model-picker", children: _jsx(AgentModelPicker, { initialAgentType: agentType, initialModel: settings.models.default, mode: "settings", onAgentModelChange: (newAgent) => setAgentType(newAgent), className: "w-55" }) }) }), _jsx(SectionHint, { links: [
                                     {
                                         label: t('settings.agent.links.agentSystem'),
                                         href: 'https://github.com/jrmatherly/shipit/blob/main/docs/architecture/agent-system.md',
@@ -210,7 +208,7 @@ export function SettingsPageClient({ settings, shipitAiHome, dbFileSize, availab
                                         label: t('settings.agent.links.configurationGuide'),
                                         href: 'https://github.com/jrmatherly/shipit/blob/main/docs/guides/configuration.md',
                                     },
-                                ], children: t('settings.agent.hint') })] }), _jsxs("div", { id: "section-environment", className: "grid scroll-mt-18 grid-cols-1 gap-x-5 rounded-lg lg:grid-cols-[1fr_280px]", children: [_jsxs(SettingsSection, { icon: Terminal, title: t('settings.environment.sectionTitle'), description: t('settings.environment.sectionDescription'), testId: "environment-settings-section", children: [_jsx(SettingsRow, { label: t('settings.environment.defaultEditor'), description: t('settings.environment.defaultEditorDescription'), htmlFor: "default-editor", children: _jsxs(Select, { value: editor, onValueChange: (v) => {
+                                ], children: t('settings.agent.hint') })] }), _jsxs("div", { id: "section-environment", className: "grid scroll-mt-18 grid-cols-1 gap-x-5 rounded-lg lg:grid-cols-[1fr_280px]", children: [_jsxs(SettingsSection, { icon: Terminal, title: t('settings.environment.sectionTitle'), description: t('settings.environment.sectionDescription'), testId: "environment-settings-section", children: [_jsx(SettingsRow, { label: t('settings.environment.defaultEditor'), description: t('settings.environment.defaultEditorDescription'), tooltip: "The editor that opens when you click 'Launch' on a tool card or when ShipIT needs to open a file for review.", htmlFor: "default-editor", children: _jsxs(Select, { value: editor, onValueChange: (v) => {
                                                 setEditor(v);
                                                 save({
                                                     environment: {
@@ -224,7 +222,7 @@ export function SettingsPageClient({ settings, shipitAiHome, dbFileSize, availab
                                                         return (_jsx(SelectItem, { value: opt.id, disabled: !opt.available, children: _jsxs("span", { className: "flex items-center gap-2 text-xs", children: [_jsx(Icon, { className: "h-4 w-4 shrink-0" }), opt.name, _jsx(Badge, { variant: "outline", className: cn('ml-auto px-1.5 py-0 text-[10px] leading-4 font-normal', opt.available
                                                                             ? 'border-emerald-500/30 text-emerald-500'
                                                                             : 'border-muted-foreground/30 text-muted-foreground'), children: opt.available ? 'Installed' : 'Not Installed' })] }) }, opt.id));
-                                                    }) })] }) }), _jsx(SettingsRow, { label: t('settings.environment.shell'), description: t('settings.environment.shellDescription'), htmlFor: "shell-preference", children: _jsxs(Select, { value: shell, onValueChange: (v) => {
+                                                    }) })] }) }), _jsx(SettingsRow, { label: t('settings.environment.shell'), description: t('settings.environment.shellDescription'), tooltip: "Controls which shell runs generated scripts like install commands and git operations. Match this to your daily driver shell.", htmlFor: "shell-preference", children: _jsxs(Select, { value: shell, onValueChange: (v) => {
                                                 setShell(v);
                                                 save({
                                                     environment: {
@@ -235,7 +233,7 @@ export function SettingsPageClient({ settings, shipitAiHome, dbFileSize, availab
                                                 });
                                             }, children: [_jsx(SelectTrigger, { id: "shell-preference", "data-testid": "shell-select", className: "w-64 cursor-pointer text-xs", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: shellOptions.map((opt) => (_jsx(SelectItem, { value: opt.id, disabled: !opt.available, children: _jsxs("span", { className: "flex items-center gap-2 text-xs", children: [opt.name, _jsx(Badge, { variant: "outline", className: cn('ml-auto px-1.5 py-0 text-[10px] leading-4 font-normal', opt.available
                                                                         ? 'border-emerald-500/30 text-emerald-500'
-                                                                        : 'border-muted-foreground/30 text-muted-foreground'), children: opt.available ? 'Installed' : 'Not Installed' })] }) }, opt.id))) })] }) }), _jsx(SettingsRow, { label: t('settings.environment.terminal'), description: t('settings.environment.terminalDescription'), htmlFor: "terminal-preference", children: _jsxs(Select, { value: terminal, onValueChange: (v) => {
+                                                                        : 'border-muted-foreground/30 text-muted-foreground'), children: opt.available ? 'Installed' : 'Not Installed' })] }) }, opt.id))) })] }) }), _jsx(SettingsRow, { label: t('settings.environment.terminal'), description: t('settings.environment.terminalDescription'), tooltip: "The terminal emulator launched when opening shell sessions from the web UI. Only affects web-launched terminals, not CLI usage.", htmlFor: "terminal-preference", children: _jsxs(Select, { value: terminal, onValueChange: (v) => {
                                                 setTerminal(v);
                                                 save({
                                                     environment: {
@@ -251,19 +249,19 @@ export function SettingsPageClient({ settings, shipitAiHome, dbFileSize, availab
                                         label: t('settings.environment.links.configurationGuide'),
                                         href: 'https://github.com/jrmatherly/shipit/blob/main/docs/guides/configuration.md',
                                     },
-                                ], children: t('settings.environment.hint') })] }), _jsxs("div", { id: "section-workflow", className: "grid scroll-mt-18 grid-cols-1 gap-x-5 rounded-lg lg:grid-cols-[1fr_280px]", children: [_jsxs(SettingsSection, { icon: GitBranch, title: t('settings.workflow.title'), description: t('settings.workflow.sectionDescription'), testId: "workflow-settings-section", children: [_jsx(SwitchRow, { label: t('settings.workflow.defaultFastMode'), description: t('settings.workflow.defaultFastModeDescription'), id: "default-fast-mode", testId: "switch-default-fast-mode", checked: defaultFastMode, onChange: (v) => {
+                                ], children: t('settings.environment.hint') })] }), _jsxs("div", { id: "section-workflow", className: "grid scroll-mt-18 grid-cols-1 gap-x-5 rounded-lg lg:grid-cols-[1fr_280px]", children: [_jsxs(SettingsSection, { icon: GitBranch, title: t('settings.workflow.title'), description: t('settings.workflow.sectionDescription'), testId: "workflow-settings-section", children: [_jsx(SwitchRow, { label: t('settings.workflow.defaultFastMode'), description: t('settings.workflow.defaultFastModeDescription'), tooltip: "When enabled, new features skip the PRD and Plan phases and go straight to implementation. Useful for quick fixes, risky for complex features.", id: "default-fast-mode", testId: "switch-default-fast-mode", checked: defaultFastMode, onChange: (v) => {
                                             setDefaultFastMode(v);
                                             save(buildWorkflowPayload({ defaultFastMode: v }));
-                                        } }), _jsx(SubsectionLabel, { children: t('settings.workflow.subsections.approve') }), _jsx(SwitchRow, { label: t('settings.workflow.autoApprovePrd'), description: t('settings.workflow.autoApprovePrdDescription'), id: "allow-prd", testId: "switch-allow-prd", checked: allowPrd, onChange: (v) => {
+                                        } }), _jsx(SubsectionLabel, { children: t('settings.workflow.subsections.approve') }), _jsx(SwitchRow, { label: t('settings.workflow.autoApprovePrd'), description: t('settings.workflow.autoApprovePrdDescription'), tooltip: "Automatically approves the requirements document without pausing for your review. Saves time but you lose the chance to refine requirements before planning.", id: "allow-prd", testId: "switch-allow-prd", checked: allowPrd, onChange: (v) => {
                                             setAllowPrd(v);
                                             save(buildWorkflowPayload({ allowPrd: v }));
-                                        } }), _jsx(SwitchRow, { label: t('settings.workflow.autoApprovePlan'), description: t('settings.workflow.autoApprovePlanDescription'), id: "allow-plan", testId: "switch-allow-plan", checked: allowPlan, onChange: (v) => {
+                                        } }), _jsx(SwitchRow, { label: t('settings.workflow.autoApprovePlan'), description: t('settings.workflow.autoApprovePlanDescription'), tooltip: "Automatically approves the implementation plan. The agent proceeds to coding without waiting for your plan review.", id: "allow-plan", testId: "switch-allow-plan", checked: allowPlan, onChange: (v) => {
                                             setAllowPlan(v);
                                             save(buildWorkflowPayload({ allowPlan: v }));
-                                        } }), _jsx(SwitchRow, { label: t('settings.workflow.autoApproveMerge'), description: t('settings.workflow.autoApproveMergeDescription'), id: "allow-merge", testId: "switch-allow-merge", checked: allowMerge, onChange: (v) => {
+                                        } }), _jsx(SwitchRow, { label: t('settings.workflow.autoApproveMerge'), description: t('settings.workflow.autoApproveMergeDescription'), tooltip: "Automatically merges the PR after implementation without requiring your final review. Use with caution on production branches.", id: "allow-merge", testId: "switch-allow-merge", checked: allowMerge, onChange: (v) => {
                                             setAllowMerge(v);
                                             save(buildWorkflowPayload({ allowMerge: v }));
-                                        } }), _jsx(SubsectionLabel, { children: t('settings.workflow.subsections.evidence') }), _jsx(SwitchRow, { label: t('settings.workflow.collectEvidence'), description: t('settings.workflow.collectEvidenceDescription'), id: "enable-evidence", testId: "switch-enable-evidence", checked: enableEvidence, onChange: (v) => {
+                                        } }), _jsx(SubsectionLabel, { children: t('settings.workflow.subsections.evidence') }), _jsx(SwitchRow, { label: t('settings.workflow.collectEvidence'), description: t('settings.workflow.collectEvidenceDescription'), tooltip: "Captures screenshots and test outputs during implementation as proof of work. Useful for audit trails and PR documentation.", id: "enable-evidence", testId: "switch-enable-evidence", checked: enableEvidence, onChange: (v) => {
                                             setEnableEvidence(v);
                                             if (!v) {
                                                 setCommitEvidence(false);
@@ -272,13 +270,13 @@ export function SettingsPageClient({ settings, shipitAiHome, dbFileSize, availab
                                             else {
                                                 save(buildWorkflowPayload({ enableEvidence: v }));
                                             }
-                                        } }), _jsx(SwitchRow, { label: t('settings.workflow.addEvidenceToPr'), description: t('settings.workflow.addEvidenceToPrDescription'), id: "commit-evidence", testId: "switch-commit-evidence", checked: commitEvidence, disabled: !enableEvidence || !openPr, onChange: (v) => {
+                                        } }), _jsx(SwitchRow, { label: t('settings.workflow.addEvidenceToPr'), description: t('settings.workflow.addEvidenceToPrDescription'), tooltip: "Attaches collected evidence artifacts (screenshots, logs) directly to the pull request description.", id: "commit-evidence", testId: "switch-commit-evidence", checked: commitEvidence, disabled: !enableEvidence || !openPr, onChange: (v) => {
                                             setCommitEvidence(v);
                                             save(buildWorkflowPayload({ commitEvidence: v }));
-                                        } }), _jsx(SubsectionLabel, { children: t('settings.workflow.subsections.git') }), _jsx(SwitchRow, { label: t('settings.workflow.pushOnComplete'), description: t('settings.workflow.pushOnCompleteDescription'), id: "push-on-complete", testId: "switch-push-on-complete", checked: pushOnComplete, onChange: (v) => {
+                                        } }), _jsx(SubsectionLabel, { children: t('settings.workflow.subsections.git') }), _jsx(SwitchRow, { label: t('settings.workflow.pushOnComplete'), description: t('settings.workflow.pushOnCompleteDescription'), tooltip: "Automatically pushes the implementation branch to the remote repository when the agent finishes coding.", id: "push-on-complete", testId: "switch-push-on-complete", checked: pushOnComplete, onChange: (v) => {
                                             setPushOnComplete(v);
                                             save(buildWorkflowPayload({ pushOnComplete: v }));
-                                        } }), _jsx(SwitchRow, { label: t('settings.workflow.openPrOnComplete'), description: t('settings.workflow.openPrOnCompleteDescription'), id: "open-pr", testId: "switch-open-pr", checked: openPr, onChange: (v) => {
+                                        } }), _jsx(SwitchRow, { label: t('settings.workflow.openPrOnComplete'), description: t('settings.workflow.openPrOnCompleteDescription'), tooltip: "Creates a pull request automatically after pushing. Combined with push-on-complete, this fully automates the delivery pipeline.", id: "open-pr", testId: "switch-open-pr", checked: openPr, onChange: (v) => {
                                             setOpenPr(v);
                                             if (!v) {
                                                 setCommitEvidence(false);
@@ -287,13 +285,13 @@ export function SettingsPageClient({ settings, shipitAiHome, dbFileSize, availab
                                             else {
                                                 save(buildWorkflowPayload({ openPr: v }));
                                             }
-                                        } }), _jsx(SwitchRow, { label: t('settings.workflow.watchCiAfterPush'), description: t('settings.workflow.watchCiAfterPushDescription'), id: "ci-watch-enabled", testId: "switch-ci-watch-enabled", checked: ciWatchEnabled, onChange: (v) => {
+                                        } }), _jsx(SwitchRow, { label: t('settings.workflow.watchCiAfterPush'), description: t('settings.workflow.watchCiAfterPushDescription'), tooltip: "Monitors CI/CD pipeline status after pushing and can attempt fixes if tests fail. Disable if you prefer to handle CI failures manually.", id: "ci-watch-enabled", testId: "switch-ci-watch-enabled", checked: ciWatchEnabled, onChange: (v) => {
                                             setCiWatchEnabled(v);
                                             save(buildWorkflowPayload({ ciWatchEnabled: v }));
-                                        } }), _jsx(SubsectionLabel, { children: "Archive" }), _jsx(SwitchRow, { label: "Auto-archive completed", description: "Automatically archive features after they reach the completed state", id: "auto-archive-enabled", testId: "switch-auto-archive-enabled", checked: autoArchiveEnabled, onChange: (v) => {
+                                        } }), _jsx(SubsectionLabel, { children: "Archive" }), _jsx(SwitchRow, { label: "Auto-archive completed", description: "Automatically archive features after they reach the completed state", tooltip: "Automatically archives features from the control center canvas after they reach the completed state, keeping the board clean.", id: "auto-archive-enabled", testId: "switch-auto-archive-enabled", checked: autoArchiveEnabled, onChange: (v) => {
                                             setAutoArchiveEnabled(v);
                                             save(buildWorkflowPayload({ autoArchiveEnabled: v }));
-                                        } }), _jsx(SettingsRow, { label: "Archive delay", description: "Minutes to wait after completion before archiving (1\u20131440)", htmlFor: "auto-archive-delay", children: _jsx(NumberStepper, { id: "auto-archive-delay", testId: "input-auto-archive-delay", value: autoArchiveDelay, placeholder: "10", min: 1, max: 1440, suffix: "min", onChange: (v) => {
+                                        } }), _jsx(SettingsRow, { label: "Archive delay", description: "Minutes to wait after completion before archiving (1\u20131440)", tooltip: "How long to wait after a feature completes before archiving it. Gives you time to review results before the feature moves off the board.", htmlFor: "auto-archive-delay", children: _jsx(NumberStepper, { id: "auto-archive-delay", testId: "input-auto-archive-delay", value: autoArchiveDelay, placeholder: "10", min: 1, max: 1440, suffix: "min", onChange: (v) => {
                                                 setAutoArchiveDelay(v);
                                             }, onBlur: () => {
                                                 if (!autoArchiveEnabled)
@@ -320,50 +318,50 @@ export function SettingsPageClient({ settings, shipitAiHome, dbFileSize, availab
                                         label: t('settings.ci.links.ciSecurityGates'),
                                         href: 'https://github.com/jrmatherly/shipit/blob/main/specs/003-cicd-security-gates/spec.md',
                                     },
-                                ], children: t('settings.ci.hint') })] }), _jsxs("div", { id: "section-stage-timeouts", className: "grid scroll-mt-18 grid-cols-1 gap-x-5 rounded-lg lg:grid-cols-[1fr_280px]", children: [_jsx(StageTimeoutsSettingsSection, { settings: settings }), _jsx(SectionHint, { children: t('settings.stageTimeouts.hint') })] }), _jsxs("div", { id: "section-notifications", className: "grid scroll-mt-18 grid-cols-1 gap-x-5 rounded-lg lg:grid-cols-[1fr_280px]", children: [_jsxs(SettingsSection, { icon: Bell, title: t('settings.notifications.title'), description: t('settings.notifications.sectionDescription'), testId: "notification-settings-section", children: [_jsx(SubsectionLabel, { children: t('settings.notifications.channels') }), _jsx(SwitchRow, { label: t('settings.notifications.inAppLabel'), description: t('settings.notifications.inAppDescription'), id: "notif-in-app", testId: "switch-in-app", checked: inApp, onChange: (v) => {
+                                ], children: t('settings.ci.hint') })] }), _jsxs("div", { id: "section-stage-timeouts", className: "grid scroll-mt-18 grid-cols-1 gap-x-5 rounded-lg lg:grid-cols-[1fr_280px]", children: [_jsx(StageTimeoutsSettingsSection, { settings: settings }), _jsx(SectionHint, { children: t('settings.stageTimeouts.hint') })] }), _jsxs("div", { id: "section-notifications", className: "grid scroll-mt-18 grid-cols-1 gap-x-5 rounded-lg lg:grid-cols-[1fr_280px]", children: [_jsxs(SettingsSection, { icon: Bell, title: t('settings.notifications.title'), description: t('settings.notifications.sectionDescription'), testId: "notification-settings-section", children: [_jsx(SubsectionLabel, { children: t('settings.notifications.channels') }), _jsx(SwitchRow, { label: t('settings.notifications.inAppLabel'), description: t('settings.notifications.inAppDescription'), tooltip: "Master toggle for in-app toast notifications. When disabled, no event toasts will appear regardless of individual event settings below.", id: "notif-in-app", testId: "switch-in-app", checked: inApp, onChange: (v) => {
                                             setInApp(v);
                                             save(buildNotificationPayload({ inApp: v }));
-                                        } }), _jsx(SubsectionLabel, { children: t('settings.notifications.subsections.agentEvents') }), _jsx(SwitchRow, { label: t('settings.notifications.events.agentStarted'), id: "notif-event-agentStarted", testId: "switch-event-agentStarted", checked: events.agentStarted, onChange: (v) => {
+                                        } }), _jsx(SubsectionLabel, { children: t('settings.notifications.subsections.agentEvents') }), _jsx(SwitchRow, { label: t('settings.notifications.events.agentStarted'), tooltip: "Controls whether you receive an in-app toast notification when an agent begins working on a feature.", id: "notif-event-agentStarted", testId: "switch-event-agentStarted", checked: events.agentStarted, onChange: (v) => {
                                             const newEvents = { ...events, agentStarted: v };
                                             setEvents(newEvents);
                                             save(buildNotificationPayload({ events: newEvents }));
-                                        } }), _jsx(SwitchRow, { label: t('settings.notifications.events.phaseCompleted'), id: "notif-event-phaseCompleted", testId: "switch-event-phaseCompleted", checked: events.phaseCompleted, onChange: (v) => {
+                                        } }), _jsx(SwitchRow, { label: t('settings.notifications.events.phaseCompleted'), tooltip: "Controls whether you receive an in-app toast notification when an agent completes a workflow phase (e.g., requirements, planning, implementation).", id: "notif-event-phaseCompleted", testId: "switch-event-phaseCompleted", checked: events.phaseCompleted, onChange: (v) => {
                                             const newEvents = { ...events, phaseCompleted: v };
                                             setEvents(newEvents);
                                             save(buildNotificationPayload({ events: newEvents }));
-                                        } }), _jsx(SwitchRow, { label: t('settings.notifications.events.waitingApproval'), id: "notif-event-waitingApproval", testId: "switch-event-waitingApproval", checked: events.waitingApproval, onChange: (v) => {
+                                        } }), _jsx(SwitchRow, { label: t('settings.notifications.events.waitingApproval'), tooltip: "Controls whether you receive an in-app toast notification when a feature is paused and waiting for your approval to continue.", id: "notif-event-waitingApproval", testId: "switch-event-waitingApproval", checked: events.waitingApproval, onChange: (v) => {
                                             const newEvents = { ...events, waitingApproval: v };
                                             setEvents(newEvents);
                                             save(buildNotificationPayload({ events: newEvents }));
-                                        } }), _jsx(SwitchRow, { label: t('settings.notifications.events.agentCompleted'), id: "notif-event-agentCompleted", testId: "switch-event-agentCompleted", checked: events.agentCompleted, onChange: (v) => {
+                                        } }), _jsx(SwitchRow, { label: t('settings.notifications.events.agentCompleted'), tooltip: "Controls whether you receive an in-app toast notification when an agent finishes all work on a feature successfully.", id: "notif-event-agentCompleted", testId: "switch-event-agentCompleted", checked: events.agentCompleted, onChange: (v) => {
                                             const newEvents = { ...events, agentCompleted: v };
                                             setEvents(newEvents);
                                             save(buildNotificationPayload({ events: newEvents }));
-                                        } }), _jsx(SwitchRow, { label: t('settings.notifications.events.agentFailed'), id: "notif-event-agentFailed", testId: "switch-event-agentFailed", checked: events.agentFailed, onChange: (v) => {
+                                        } }), _jsx(SwitchRow, { label: t('settings.notifications.events.agentFailed'), tooltip: "Controls whether you receive an in-app toast notification when an agent encounters an error and stops working on a feature.", id: "notif-event-agentFailed", testId: "switch-event-agentFailed", checked: events.agentFailed, onChange: (v) => {
                                             const newEvents = { ...events, agentFailed: v };
                                             setEvents(newEvents);
                                             save(buildNotificationPayload({ events: newEvents }));
-                                        } }), _jsx(SubsectionLabel, { children: t('settings.notifications.subsections.pullRequestEvents') }), _jsx(SwitchRow, { label: t('settings.notifications.events.prMerged'), id: "notif-event-prMerged", testId: "switch-event-prMerged", checked: events.prMerged, onChange: (v) => {
+                                        } }), _jsx(SubsectionLabel, { children: t('settings.notifications.subsections.pullRequestEvents') }), _jsx(SwitchRow, { label: t('settings.notifications.events.prMerged'), tooltip: "Controls whether you receive an in-app toast notification when a feature's pull request is merged into the target branch.", id: "notif-event-prMerged", testId: "switch-event-prMerged", checked: events.prMerged, onChange: (v) => {
                                             const newEvents = { ...events, prMerged: v };
                                             setEvents(newEvents);
                                             save(buildNotificationPayload({ events: newEvents }));
-                                        } }), _jsx(SwitchRow, { label: t('settings.notifications.events.prClosed'), id: "notif-event-prClosed", testId: "switch-event-prClosed", checked: events.prClosed, onChange: (v) => {
+                                        } }), _jsx(SwitchRow, { label: t('settings.notifications.events.prClosed'), tooltip: "Controls whether you receive an in-app toast notification when a feature's pull request is closed without merging.", id: "notif-event-prClosed", testId: "switch-event-prClosed", checked: events.prClosed, onChange: (v) => {
                                             const newEvents = { ...events, prClosed: v };
                                             setEvents(newEvents);
                                             save(buildNotificationPayload({ events: newEvents }));
-                                        } }), _jsx(SwitchRow, { label: t('settings.notifications.events.prChecksPassed'), id: "notif-event-prChecksPassed", testId: "switch-event-prChecksPassed", checked: events.prChecksPassed, onChange: (v) => {
+                                        } }), _jsx(SwitchRow, { label: t('settings.notifications.events.prChecksPassed'), tooltip: "Controls whether you receive an in-app toast notification when all CI checks pass on a feature's pull request.", id: "notif-event-prChecksPassed", testId: "switch-event-prChecksPassed", checked: events.prChecksPassed, onChange: (v) => {
                                             const newEvents = { ...events, prChecksPassed: v };
                                             setEvents(newEvents);
                                             save(buildNotificationPayload({ events: newEvents }));
-                                        } }), _jsx(SwitchRow, { label: t('settings.notifications.events.prChecksFailed'), id: "notif-event-prChecksFailed", testId: "switch-event-prChecksFailed", checked: events.prChecksFailed, onChange: (v) => {
+                                        } }), _jsx(SwitchRow, { label: t('settings.notifications.events.prChecksFailed'), tooltip: "Controls whether you receive an in-app toast notification when CI checks fail on a feature's pull request.", id: "notif-event-prChecksFailed", testId: "switch-event-prChecksFailed", checked: events.prChecksFailed, onChange: (v) => {
                                             const newEvents = { ...events, prChecksFailed: v };
                                             setEvents(newEvents);
                                             save(buildNotificationPayload({ events: newEvents }));
-                                        } }), _jsx(SwitchRow, { label: t('settings.notifications.events.prBlocked'), id: "notif-event-prBlocked", testId: "switch-event-prBlocked", checked: events.prBlocked, onChange: (v) => {
+                                        } }), _jsx(SwitchRow, { label: t('settings.notifications.events.prBlocked'), tooltip: "Controls whether you receive an in-app toast notification when a pull request is blocked by merge conflicts or branch protection rules.", id: "notif-event-prBlocked", testId: "switch-event-prBlocked", checked: events.prBlocked, onChange: (v) => {
                                             const newEvents = { ...events, prBlocked: v };
                                             setEvents(newEvents);
                                             save(buildNotificationPayload({ events: newEvents }));
-                                        } }), _jsx(SwitchRow, { label: t('settings.notifications.events.mergeReviewReady'), id: "notif-event-mergeReviewReady", testId: "switch-event-mergeReviewReady", checked: events.mergeReviewReady, onChange: (v) => {
+                                        } }), _jsx(SwitchRow, { label: t('settings.notifications.events.mergeReviewReady'), tooltip: "Controls whether you receive an in-app toast notification when a feature's PR passes all checks and is ready for your merge review.", id: "notif-event-mergeReviewReady", testId: "switch-event-mergeReviewReady", checked: events.mergeReviewReady, onChange: (v) => {
                                             const newEvents = { ...events, mergeReviewReady: v };
                                             setEvents(newEvents);
                                             save(buildNotificationPayload({ events: newEvents }));
@@ -372,35 +370,35 @@ export function SettingsPageClient({ settings, shipitAiHome, dbFileSize, availab
                                         label: t('settings.notifications.links.notificationSystem'),
                                         href: 'https://github.com/jrmatherly/shipit/blob/main/specs/021-agent-notifications/spec.yaml',
                                     },
-                                ], children: t('settings.notifications.hint') })] }), _jsxs("div", { id: "section-feature-flags", className: "grid scroll-mt-18 grid-cols-1 gap-x-5 rounded-lg lg:grid-cols-[1fr_280px]", children: [_jsxs(SettingsSection, { icon: Flag, title: t('settings.featureFlags.title'), description: t('settings.featureFlags.sectionDescription'), badge: t('settings.featureFlags.badge'), testId: "feature-flags-settings-section", children: [_jsx(SwitchRow, { label: t('settings.featureFlags.skills'), description: t('settings.featureFlags.skillsDescription'), id: "flag-skills", testId: "switch-flag-skills", checked: flags.skills, onChange: (v) => {
+                                ], children: t('settings.notifications.hint') })] }), _jsxs("div", { id: "section-feature-flags", className: "grid scroll-mt-18 grid-cols-1 gap-x-5 rounded-lg lg:grid-cols-[1fr_280px]", children: [_jsxs(SettingsSection, { icon: Flag, title: t('settings.featureFlags.title'), description: t('settings.featureFlags.sectionDescription'), badge: t('settings.featureFlags.badge'), testId: "feature-flags-settings-section", children: [_jsx(SwitchRow, { label: t('settings.featureFlags.skills'), description: t('settings.featureFlags.skillsDescription'), tooltip: "Enables the Skills page in the sidebar for browsing and managing Claude Code skills.", id: "flag-skills", testId: "switch-flag-skills", checked: flags.skills, onChange: (v) => {
                                             const newFlags = { ...flags, skills: v };
                                             setFlags(newFlags);
                                             save({ featureFlags: newFlags });
-                                        } }), _jsx(SwitchRow, { label: t('settings.featureFlags.deployments'), description: t('settings.featureFlags.deploymentsDescription'), id: "flag-envDeploy", testId: "switch-flag-envDeploy", checked: flags.envDeploy, onChange: (v) => {
+                                        } }), _jsx(SwitchRow, { label: t('settings.featureFlags.deployments'), description: t('settings.featureFlags.deploymentsDescription'), tooltip: "Enables experimental deployment features for environment management.", id: "flag-envDeploy", testId: "switch-flag-envDeploy", checked: flags.envDeploy, onChange: (v) => {
                                             const newFlags = { ...flags, envDeploy: v };
                                             setFlags(newFlags);
                                             save({ featureFlags: newFlags });
-                                        } }), _jsx(SwitchRow, { label: t('settings.featureFlags.debug'), description: t('settings.featureFlags.debugDescription'), id: "flag-debug", testId: "switch-flag-debug", checked: flags.debug, onChange: (v) => {
+                                        } }), _jsx(SwitchRow, { label: t('settings.featureFlags.debug'), description: t('settings.featureFlags.debugDescription'), tooltip: "Shows additional debugging information in the UI for troubleshooting.", id: "flag-debug", testId: "switch-flag-debug", checked: flags.debug, onChange: (v) => {
                                             const newFlags = { ...flags, debug: v };
                                             setFlags(newFlags);
                                             save({ featureFlags: newFlags });
-                                        } }), _jsx(SwitchRow, { label: t('settings.featureFlags.githubImport'), description: t('settings.featureFlags.githubImportDescription'), id: "flag-githubImport", testId: "switch-flag-githubImport", checked: flags.githubImport, onChange: (v) => {
+                                        } }), _jsx(SwitchRow, { label: t('settings.featureFlags.githubImport'), description: t('settings.featureFlags.githubImportDescription'), tooltip: "Enables importing repositories directly from GitHub.", id: "flag-githubImport", testId: "switch-flag-githubImport", checked: flags.githubImport, onChange: (v) => {
                                             const newFlags = { ...flags, githubImport: v };
                                             setFlags(newFlags);
                                             save({ featureFlags: newFlags });
-                                        } }), _jsx(SwitchRow, { label: t('settings.featureFlags.adoptBranch'), description: t('settings.featureFlags.adoptBranchDescription'), id: "flag-adoptBranch", testId: "switch-flag-adoptBranch", checked: flags.adoptBranch, onChange: (v) => {
+                                        } }), _jsx(SwitchRow, { label: t('settings.featureFlags.adoptBranch'), description: t('settings.featureFlags.adoptBranchDescription'), tooltip: "Enables adopting existing git branches as ShipIT features.", id: "flag-adoptBranch", testId: "switch-flag-adoptBranch", checked: flags.adoptBranch, onChange: (v) => {
                                             const newFlags = { ...flags, adoptBranch: v };
                                             setFlags(newFlags);
                                             save({ featureFlags: newFlags });
-                                        } }), _jsx(SwitchRow, { label: t('settings.featureFlags.gitRebaseSync'), description: t('settings.featureFlags.gitRebaseSyncDescription'), id: "flag-gitRebaseSync", testId: "switch-flag-gitRebaseSync", checked: flags.gitRebaseSync, onChange: (v) => {
+                                        } }), _jsx(SwitchRow, { label: t('settings.featureFlags.gitRebaseSync'), description: t('settings.featureFlags.gitRebaseSyncDescription'), tooltip: "Uses git rebase instead of merge when syncing feature branches with the upstream branch.", id: "flag-gitRebaseSync", testId: "switch-flag-gitRebaseSync", checked: flags.gitRebaseSync, onChange: (v) => {
                                             const newFlags = { ...flags, gitRebaseSync: v };
                                             setFlags(newFlags);
                                             save({ featureFlags: newFlags });
-                                        } }), _jsx(SwitchRow, { label: t('settings.featureFlags.reactFileManager'), description: t('settings.featureFlags.reactFileManagerDescription'), id: "flag-reactFileManager", testId: "switch-flag-reactFileManager", checked: flags.reactFileManager, onChange: (v) => {
+                                        } }), _jsx(SwitchRow, { label: t('settings.featureFlags.reactFileManager'), description: t('settings.featureFlags.reactFileManagerDescription'), tooltip: "Replaces the native file picker dialog with a React-based file browser for selecting project folders.", id: "flag-reactFileManager", testId: "switch-flag-reactFileManager", checked: flags.reactFileManager, onChange: (v) => {
                                             const newFlags = { ...flags, reactFileManager: v };
                                             setFlags(newFlags);
                                             save({ featureFlags: newFlags });
-                                        } })] }), _jsx(SectionHint, { children: t('settings.featureFlags.hint') })] }), _jsxs("div", { id: "section-interactive-agent", className: "grid scroll-mt-18 grid-cols-1 gap-x-5 rounded-lg lg:grid-cols-[1fr_280px]", children: [_jsx(InteractiveAgentSettingsSection, { settings: settings }), _jsx(SectionHint, { children: t('settings.interactiveAgent.hint') })] }), _jsxs("div", { id: "section-fab-layout", className: "grid scroll-mt-18 grid-cols-1 gap-x-5 rounded-lg lg:grid-cols-[1fr_280px]", children: [_jsx(FabLayoutSettingsSection, { settings: settings }), _jsx(SectionHint, { children: t('settings.fabLayout.hint') })] }), _jsxs("div", { id: "section-database", className: "grid scroll-mt-18 grid-cols-1 gap-x-5 rounded-lg lg:grid-cols-[1fr_280px]", children: [_jsxs(SettingsSection, { icon: Database, title: t('settings.database.title'), description: t('settings.database.sectionDescription'), testId: "database-settings-section", children: [_jsx(SettingsRow, { label: t('settings.database.location'), description: t('settings.database.locationDescription'), children: _jsx("span", { className: "text-muted-foreground max-w-50 truncate font-mono text-xs", "data-testid": "shipit-ai-home-path", children: shipitAiHome }) }), _jsx(SettingsRow, { label: t('settings.database.size'), children: _jsx("span", { className: "text-muted-foreground text-xs", "data-testid": "db-file-size", children: dbFileSize }) })] }), _jsx(SectionHint, { links: [
+                                        } })] }), _jsx(SectionHint, { children: t('settings.featureFlags.hint') })] }), _jsxs("div", { id: "section-interactive-agent", className: "grid scroll-mt-18 grid-cols-1 gap-x-5 rounded-lg lg:grid-cols-[1fr_280px]", children: [_jsx(InteractiveAgentSettingsSection, { settings: settings }), _jsx(SectionHint, { children: t('settings.interactiveAgent.hint') })] }), _jsxs("div", { id: "section-fab-layout", className: "grid scroll-mt-18 grid-cols-1 gap-x-5 rounded-lg lg:grid-cols-[1fr_280px]", children: [_jsx(FabLayoutSettingsSection, { settings: settings }), _jsx(SectionHint, { children: t('settings.fabLayout.hint') })] }), _jsxs("div", { id: "section-database", className: "grid scroll-mt-18 grid-cols-1 gap-x-5 rounded-lg lg:grid-cols-[1fr_280px]", children: [_jsxs(SettingsSection, { icon: Database, title: t('settings.database.title'), description: t('settings.database.sectionDescription'), testId: "database-settings-section", children: [_jsx(SettingsRow, { label: t('settings.database.location'), description: t('settings.database.locationDescription'), tooltip: "The directory where ShipIT stores its SQLite database, logs, and configuration files. Change this via the SHIPIT_AI_HOME environment variable.", children: _jsx("span", { className: "text-muted-foreground max-w-50 truncate font-mono text-xs", "data-testid": "shipit-ai-home-path", children: shipitAiHome }) }), _jsx(SettingsRow, { label: t('settings.database.size'), tooltip: "Current size of the SQLite database file on disk. Large databases may slow down startup; consider archiving old features if this grows significantly.", children: _jsx("span", { className: "text-muted-foreground text-xs", "data-testid": "db-file-size", children: dbFileSize }) })] }), _jsx(SectionHint, { links: [
                                     {
                                         label: t('settings.database.links.settingsService'),
                                         href: 'https://github.com/jrmatherly/shipit/blob/main/docs/architecture/settings-service.md',

package/dist/src/presentation/web/components/features/settings/settings-section-utils.d.ts

@@ -1,10 +1,12 @@
-export declare function SettingsRow({ label, description, htmlFor, children, }: {
+export declare function SettingsRow({ label, description, htmlFor, tooltip, children, }: {
     label: string;
     description?: string;
     htmlFor?: string;
+    /** Explicit tooltip text. Falls back to `description` if not provided. */
+    tooltip?: string;
     children: React.ReactNode;
 }): import("react/jsx-runtime").JSX.Element;
-export declare function SwitchRow({ label, description, id, testId, checked, onChange, disabled, }: {
+export declare function SwitchRow({ label, description, id, testId, checked, onChange, disabled, tooltip, }: {
     label: string;
     description?: string;
     id: string;
@@ -12,6 +14,7 @@ export declare function SwitchRow({ label, description, id, testId, checked, onC
     checked: boolean;
     onChange: (value: boolean) => void;
     disabled?: boolean;
+    tooltip?: string;
 }): import("react/jsx-runtime").JSX.Element;
 export declare function SettingsSection({ icon: Icon, title, description, badge, testId, children, }: {
     icon: React.ComponentType<{

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

@@ -1 +1 @@
-{"version":3,"file":"settings-section-utils.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/settings/settings-section-utils.tsx"],"names":[],"mappings":"AAUA,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,WAAW,EACX,OAAO,EACP,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,2CAcA;AAED,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,WAAW,EACX,EAAE,EACF,MAAM,EACN,OAAO,EACP,QAAQ,EACR,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,2CAaA;AAID,wBAAgB,eAAe,CAAC,EAC9B,IAAI,EAAE,IAAI,EACV,KAAK,EACL,WAAW,EACX,KAAK,EACL,MAAM,EACN,QAAQ,GACT,EAAE;IACD,IAAI,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAClD,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,2CAkBA;AAED,wBAAgB,aAAa,CAAC,EAC5B,EAAE,EACF,MAAM,EACN,KAAK,EACL,QAAQ,EACR,MAAM,EACN,WAAW,EACX,GAAO,EACP,GAAG,EACH,IAAQ,EACR,MAAM,GACP,EAAE;IACD,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,2CA4DA;AAED,wBAAgB,eAAe,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,2CAQ1E;AAED,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,KAAK,GACN,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;CAC3C,2CAsBA"}
+{"version":3,"file":"settings-section-utils.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/settings/settings-section-utils.tsx"],"names":[],"mappings":"AAWA,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,WAAW,EACX,OAAO,EACP,OAAO,EACP,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,0EAA0E;IAC1E,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,2CA6BA;AAED,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,WAAW,EACX,EAAE,EACF,MAAM,EACN,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,OAAO,GACR,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,2CAaA;AAID,wBAAgB,eAAe,CAAC,EAC9B,IAAI,EAAE,IAAI,EACV,KAAK,EACL,WAAW,EACX,KAAK,EACL,MAAM,EACN,QAAQ,GACT,EAAE;IACD,IAAI,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAClD,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,2CAkBA;AAED,wBAAgB,aAAa,CAAC,EAC5B,EAAE,EACF,MAAM,EACN,KAAK,EACL,QAAQ,EACR,MAAM,EACN,WAAW,EACX,GAAO,EACP,GAAG,EACH,IAAQ,EACR,MAAM,GACP,EAAE;IACD,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,2CA4DA;AAED,wBAAgB,eAAe,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,2CAQ1E;AAED,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,KAAK,GACN,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;CAC3C,2CAsBA"}

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

@@ -1,16 +1,19 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Minus, Plus, ExternalLink } from 'lucide-react';
+import { Minus, Plus, ExternalLink, Info } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { cn } from '../../../lib/utils.js';
 import { Label } from '../../ui/label.js';
 import { Switch } from '../../ui/switch.js';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../../ui/tooltip.js';
 /* ── Reusable row components ── */
-export function SettingsRow({ label, description, htmlFor, children, }) {
-    return (_jsxs("div", { className: "flex items-center justify-between gap-4 border-b py-2.5 last:border-b-0", children: [_jsxs("div", { className: "min-w-0", children: [_jsx(Label, { htmlFor: htmlFor, className: "cursor-pointer text-sm font-normal whitespace-nowrap", children: label }), description ? (_jsx("p", { className: "text-muted-foreground text-[11px] leading-tight", children: description })) : null] }), _jsx("div", { className: "flex shrink-0 items-center gap-2", children: children })] }));
+export function SettingsRow({ label, description, htmlFor, tooltip, children, }) {
+    // Show the Info icon when there's either an explicit tooltip or a description to surface
+    const tooltipText = tooltip ?? description;
+    return (_jsxs("div", { className: "flex items-center justify-between gap-4 border-b py-2.5 last:border-b-0", children: [_jsxs("div", { className: "min-w-0", children: [_jsxs("span", { className: "flex items-center gap-1.5", children: [_jsx(Label, { htmlFor: htmlFor, className: "cursor-pointer text-sm font-normal whitespace-nowrap", children: label }), tooltipText ? (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Info, { className: "text-muted-foreground/40 hover:text-muted-foreground h-3.5 w-3.5 shrink-0 cursor-help transition-colors" }) }), _jsx(TooltipContent, { side: "top", className: "max-w-72 text-xs leading-relaxed", children: tooltipText })] })) : null] }), description ? (_jsx("p", { className: "text-muted-foreground text-[11px] leading-tight", children: description })) : null] }), _jsx("div", { className: "flex shrink-0 items-center gap-2", children: children })] }));
 }
-export function SwitchRow({ label, description, id, testId, checked, onChange, disabled, }) {
-    return (_jsx(SettingsRow, { label: label, description: description, htmlFor: id, children: _jsx(Switch, { id: id, "data-testid": testId, checked: checked, onCheckedChange: onChange, disabled: disabled, className: cn('cursor-pointer', disabled && 'cursor-not-allowed opacity-50') }) }));
+export function SwitchRow({ label, description, id, testId, checked, onChange, disabled, tooltip, }) {
+    return (_jsx(SettingsRow, { label: label, description: description, htmlFor: id, tooltip: tooltip, children: _jsx(Switch, { id: id, "data-testid": testId, checked: checked, onCheckedChange: onChange, disabled: disabled, className: cn('cursor-pointer', disabled && 'cursor-not-allowed opacity-50') }) }));
 }
 /* ── Section card wrapper ── */
 export function SettingsSection({ icon: Icon, title, description, badge, testId, children, }) {

package/dist/src/presentation/web/components/features/skills/category-filter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"category-filter.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/skills/category-filter.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAUlD,MAAM,WAAW,mBAAmB;IAClC,cAAc,EAAE,aAAa,GAAG,IAAI,CAAC;IACrC,gBAAgB,EAAE,CAAC,QAAQ,EAAE,aAAa,GAAG,IAAI,KAAK,IAAI,CAAC;IAC3D,MAAM,CAAC,EAAE,MAAM,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;CACxC;AAED,wBAAgB,cAAc,CAAC,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,EAAE,EAAE,mBAAmB,2CAkB/F"}
+{"version":3,"file":"category-filter.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/skills/category-filter.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAUlD,MAAM,WAAW,mBAAmB;IAClC,cAAc,EAAE,aAAa,GAAG,IAAI,CAAC;IACrC,gBAAgB,EAAE,CAAC,QAAQ,EAAE,aAAa,GAAG,IAAI,KAAK,IAAI,CAAC;IAC3D,MAAM,CAAC,EAAE,MAAM,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;CACxC;AAOD,wBAAgB,cAAc,CAAC,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,EAAE,EAAE,mBAAmB,2CA8B/F"}

package/dist/src/presentation/web/components/features/skills/category-filter.js

@@ -1,5 +1,5 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { Button } from '../../ui/button.js';
+import { cn } from '../../../lib/utils.js';
 const CATEGORIES = [
     { label: 'All', value: null },
     { label: 'Workflow', value: 'Workflow' },
@@ -7,6 +7,16 @@ const CATEGORIES = [
     { label: 'Analysis', value: 'Analysis' },
     { label: 'Reference', value: 'Reference' },
 ];
+/*
+ * Category filter — editorial tab treatment matching the Tools page.
+ * Uses bg-card container with editorial-shadow, active pill with bg-muted +
+ * text-primary + ring lift, inactive pills with muted text and hover affordance.
+ */
 export function CategoryFilter({ activeCategory, onCategoryChange, counts }) {
-    return (_jsx("div", { className: "flex flex-wrap gap-2", role: "group", "aria-label": "Filter by category", children: CATEGORIES.map(({ label, value }) => (_jsxs(Button, { variant: activeCategory === value ? 'default' : 'outline', size: "sm", onClick: () => onCategoryChange(value), children: [label, counts && value ? (_jsxs("span", { className: "ms-1 text-xs opacity-70", children: ["(", counts[value], ")"] })) : null] }, label))) }));
+    return (_jsx("div", { className: "bg-card editorial-shadow inline-flex flex-wrap items-center gap-1 rounded-lg p-1", role: "group", "aria-label": "Filter by category", children: CATEGORIES.map(({ label, value }) => {
+            const isActive = activeCategory === value;
+            return (_jsxs("button", { type: "button", onClick: () => onCategoryChange(value), className: cn('cursor-pointer rounded-md px-3 py-1.5 text-xs font-bold transition-all', isActive
+                    ? 'bg-muted text-primary shadow-sm ring-1 ring-slate-200/70 dark:ring-slate-700/50'
+                    : 'text-muted-foreground hover:text-foreground'), children: [label, counts != null && value != null ? (_jsxs("span", { className: "ms-1 opacity-70", children: ["(", counts[value], ")"] })) : null] }, label));
+        }) }));
 }

package/dist/src/presentation/web/components/features/skills/skill-card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"skill-card.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/skills/skill-card.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAG9C,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;CACtC;AAED,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,cAAc,2CAqC5D"}
+{"version":3,"file":"skill-card.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/skills/skill-card.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAG9C,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;CACtC;AAED,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,cAAc,2CA0C5D"}

package/dist/src/presentation/web/components/features/skills/skill-card.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Card, CardContent, CardHeader, CardTitle } from '../../ui/card.js';
+import { Card } from '../../ui/card.js';
 import { Badge } from '../../ui/badge.js';
 import { FolderOpen } from 'lucide-react';
 export function SkillCard({ skill, onSelect }) {
-    return (_jsxs(Card, { className: "hover:border-primary/50 cursor-pointer transition-colors", role: "button", tabIndex: 0, onClick: () => onSelect(skill), onKeyDown: (e) => {
+    return (_jsxs(Card, { className: "cursor-pointer p-5 transition-all duration-300 hover:-translate-y-0.5 hover:shadow-md hover:ring-slate-300 dark:hover:ring-slate-600", 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}`, children: [_jsxs(CardHeader, { className: "pb-3", children: [_jsx(CardTitle, { className: "text-base", children: skill.displayName }), _jsx("p", { className: "text-muted-foreground font-mono text-xs", children: skill.name })] }), _jsxs(CardContent, { className: "space-y-3", children: [_jsx("p", { className: "text-muted-foreground line-clamp-2 text-sm", children: skill.description }), _jsxs("div", { className: "flex flex-wrap items-center gap-1.5", children: [_jsx(Badge, { variant: skill.source === 'project' ? 'secondary' : 'outline', children: skill.source === 'project' ? 'Project' : 'Global' }), skill.context ? _jsx(Badge, { variant: "outline", children: skill.context }) : null, skill.allowedTools ? _jsx(Badge, { variant: "outline", children: "Tools" }) : null, skill.resources.length > 0 ? (_jsxs("span", { className: "text-muted-foreground inline-flex items-center gap-1 text-xs", children: [_jsx(FolderOpen, { className: "size-3" }), skill.resources.length, " ", skill.resources.length === 1 ? 'resource' : 'resources'] })) : null] })] })] }));
+        }, "data-testid": `skill-card-${skill.name}`, children: [_jsx("h3", { className: "text-foreground text-sm leading-tight font-bold tracking-tight", children: skill.displayName }), _jsx("p", { className: "text-muted-foreground mt-1 font-mono text-xs", children: skill.name }), _jsx("p", { className: "text-muted-foreground mt-3 line-clamp-2 text-xs leading-relaxed", children: skill.description }), _jsxs("div", { className: "mt-4 flex flex-wrap items-center gap-1.5", children: [_jsx(Badge, { variant: skill.source === 'project' ? 'secondary' : 'outline', children: skill.source === 'project' ? 'Project' : 'Global' }), skill.context ? _jsx(Badge, { variant: "outline", children: skill.context }) : null, skill.allowedTools ? _jsx(Badge, { variant: "outline", children: "Tools" }) : null, skill.resources.length > 0 ? (_jsxs("span", { className: "text-muted-foreground inline-flex items-center gap-1 text-xs", children: [_jsx(FolderOpen, { className: "size-3" }), skill.resources.length, " ", skill.resources.length === 1 ? 'resource' : 'resources'] })) : null] })] }));
 }

package/dist/src/presentation/web/components/features/skills/skill-detail-drawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"skill-detail-drawer.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/skills/skill-detail-drawer.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,MAAM,WAAW,sBAAsB;IACrC,KAAK,EAAE,SAAS,GAAG,IAAI,CAAC;IACxB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,wBAAgB,iBAAiB,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,sBAAsB,2CA+E3E"}
+{"version":3,"file":"skill-detail-drawer.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/skills/skill-detail-drawer.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AA0D9C,MAAM,WAAW,sBAAsB;IACrC,KAAK,EAAE,SAAS,GAAG,IAAI,CAAC;IACxB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,wBAAgB,iBAAiB,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,sBAAsB,2CAiH3E"}

package/dist/src/presentation/web/components/features/skills/skill-detail-drawer.js

@@ -1,10 +1,36 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import Markdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
 import { BaseDrawer } from '../../common/base-drawer/index.js';
 import { DrawerTitle, DrawerDescription } from '../../ui/drawer.js';
 import { Badge } from '../../ui/badge.js';
 import { Separator } from '../../ui/separator.js';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../../ui/tooltip.js';
 import { FolderOpen } from 'lucide-react';
+/*
+ * Markdown component overrides for skill body rendering.
+ * Styled to match the editorial palette and fit within the drawer's
+ * constrained width. Uses the same pattern as tech-decisions-review.
+ */
+const mdComponents = {
+    h1: ({ children }) => (_jsx("h1", { className: "text-foreground mt-6 mb-3 text-lg font-bold tracking-tight first:mt-0", children: children })),
+    h2: ({ children }) => (_jsx("h2", { className: "text-foreground mt-5 mb-2 text-base font-bold tracking-tight", children: children })),
+    h3: ({ children }) => _jsx("h3", { className: "text-foreground mt-4 mb-2 text-sm font-bold", children: children }),
+    p: ({ children }) => (_jsx("p", { className: "text-muted-foreground mb-3 text-sm leading-relaxed last:mb-0", children: children })),
+    strong: ({ children }) => _jsx("strong", { className: "text-foreground font-semibold", children: children }),
+    em: ({ children }) => _jsx("em", { className: "italic", children: children }),
+    code: ({ children, className }) => className ? (_jsx("code", { className: `${className} text-xs`, children: children })) : (_jsx("code", { className: "bg-muted text-foreground rounded-md px-1.5 py-0.5 font-mono text-xs", children: children })),
+    pre: ({ children }) => (_jsx("pre", { className: "bg-muted my-3 overflow-x-auto rounded-lg border p-3 text-xs", children: children })),
+    ul: ({ children }) => (_jsx("ul", { className: "text-muted-foreground mb-3 list-disc space-y-1 ps-5 text-sm", children: children })),
+    ol: ({ children }) => (_jsx("ol", { className: "text-muted-foreground mb-3 list-decimal space-y-1 ps-5 text-sm", children: children })),
+    li: ({ children }) => _jsx("li", { className: "leading-relaxed", children: children }),
+    hr: () => _jsx(Separator, { className: "my-4" }),
+    a: ({ href, children }) => (_jsx("a", { href: href, target: "_blank", rel: "noopener noreferrer", className: "text-primary hover:text-primary/80 underline underline-offset-2", children: children })),
+    blockquote: ({ children }) => (_jsx("blockquote", { className: "border-primary/30 text-muted-foreground my-3 border-l-2 pl-4 italic", children: children })),
+};
 export function SkillDetailDrawer({ skill, onClose }) {
-    return (_jsx(BaseDrawer, { open: skill !== null, onClose: onClose, size: "sm", modal: true, "data-testid": "skill-detail-drawer", header: skill ? (_jsxs(_Fragment, { children: [_jsx(DrawerTitle, { children: skill.displayName }), _jsx(DrawerDescription, { children: skill.name })] })) : undefined, children: skill ? (_jsxs("div", { className: "px-4 pb-4", children: [_jsx("p", { className: "text-muted-foreground text-sm", children: skill.description }), _jsxs("div", { className: "mt-4 flex flex-wrap items-center gap-1.5", children: [_jsx(Badge, { variant: skill.source === 'project' ? 'secondary' : 'outline', children: skill.source === 'project' ? 'Project' : 'Global' }), _jsx(Badge, { variant: "outline", children: skill.category }), skill.context ? _jsx(Badge, { variant: "outline", children: skill.context }) : null] }), skill.allowedTools ? (_jsxs(_Fragment, { children: [_jsx(Separator, { className: "my-4" }), _jsxs("div", { children: [_jsx("h3", { className: "text-sm font-semibold", children: "Allowed Tools" }), _jsx("p", { className: "text-muted-foreground mt-1 text-sm", children: skill.allowedTools })] })] })) : null, skill.resources.length > 0 ? (_jsxs(_Fragment, { children: [_jsx(Separator, { className: "my-4" }), _jsxs("div", { children: [_jsx("h3", { className: "text-sm font-semibold", children: "Resources" }), _jsx("ul", { className: "mt-2 space-y-1.5", children: skill.resources.map((resource) => (_jsxs("li", { className: "text-muted-foreground flex items-center gap-2 text-sm", children: [_jsx(FolderOpen, { className: "size-3.5 shrink-0" }), _jsxs("span", { children: [resource.name, "/ \u2014 ", resource.fileCount, ' ', resource.fileCount === 1 ? 'file' : 'files'] })] }, resource.name))) })] })] })) : null, skill.body ? (_jsxs(_Fragment, { children: [_jsx(Separator, { className: "my-4" }), _jsx("pre", { className: "text-muted-foreground text-sm leading-relaxed whitespace-pre-wrap", children: skill.body })] })) : null] })) : null }));
+    return (_jsx(BaseDrawer, { open: skill !== null, onClose: onClose, size: "sm", modal: true, "data-testid": "skill-detail-drawer", header: skill ? (_jsxs(_Fragment, { children: [_jsx(DrawerTitle, { children: skill.displayName }), _jsx(DrawerDescription, { children: skill.name })] })) : undefined, children: skill ? (_jsxs("div", { className: "min-h-0 flex-1 overflow-y-auto px-4 pb-4", children: [_jsx("p", { className: "text-muted-foreground text-sm", children: skill.description }), _jsxs("div", { className: "mt-4 flex flex-wrap items-center gap-1.5", children: [_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Badge, { variant: skill.source === 'project' ? 'secondary' : 'outline', className: "cursor-default", children: skill.source === 'project' ? 'Project' : 'Global' }) }), _jsx(TooltipContent, { side: "bottom", children: skill.source === 'project'
+                                        ? 'Installed in this project\u2019s .claude/skills/ directory'
+                                        : 'Installed globally in your user profile' })] }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Badge, { variant: "outline", className: "cursor-default", children: skill.category }) }), _jsx(TooltipContent, { side: "bottom", children: "Skill category \\u2014 used for filtering on the Skills page" })] }), skill.context ? (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Badge, { variant: "outline", className: "cursor-default", children: skill.context }) }), _jsx(TooltipContent, { side: "bottom", children: "Context restriction \\u2014 this skill only activates in this context" })] })) : null] }), skill.allowedTools ? (_jsxs(_Fragment, { children: [_jsx(Separator, { className: "my-4" }), _jsxs("div", { children: [_jsx("h3", { className: "text-sm font-semibold", children: "Allowed Tools" }), _jsx("p", { className: "text-muted-foreground mt-1 text-sm", children: skill.allowedTools })] })] })) : null, skill.resources.length > 0 ? (_jsxs(_Fragment, { children: [_jsx(Separator, { className: "my-4" }), _jsxs("div", { children: [_jsx("h3", { className: "text-sm font-semibold", children: "Resources" }), _jsx("ul", { className: "mt-2 space-y-1.5", children: skill.resources.map((resource) => (_jsxs("li", { className: "text-muted-foreground flex items-center gap-2 text-sm", children: [_jsx(FolderOpen, { className: "size-3.5 shrink-0" }), _jsxs("span", { children: [resource.name, "/ \u2014 ", resource.fileCount, ' ', resource.fileCount === 1 ? 'file' : 'files'] })] }, resource.name))) })] })] })) : null, skill.body ? (_jsxs(_Fragment, { children: [_jsx(Separator, { className: "my-4" }), _jsx("div", { className: "prose-sm", children: _jsx(Markdown, { remarkPlugins: [remarkGfm], components: mdComponents, children: skill.body }) })] })) : null] })) : null }));
 }

package/dist/src/presentation/web/components/features/skills/skill-list.js

@@ -12,10 +12,10 @@ function groupByCategory(skills) {
 }
 export function SkillList({ skills, onSkillSelect }) {
     const groups = groupByCategory(skills);
-    return (_jsx("div", { className: "space-y-8", children: CATEGORY_ORDER.map((category) => {
+    return (_jsx("div", { className: "space-y-12", children: CATEGORY_ORDER.map((category) => {
             const categorySkills = groups.get(category);
             if (!categorySkills || categorySkills.length === 0)
                 return null;
-            return (_jsxs("section", { children: [_jsxs("h2", { className: "mb-4 text-lg font-semibold", children: [category, ' ', _jsxs("span", { className: "text-muted-foreground text-sm font-normal", children: ["(", categorySkills.length, ")"] })] }), _jsx("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3", children: categorySkills.map((skill) => (_jsx(SkillCard, { skill: skill, onSelect: onSkillSelect }, skill.name))) })] }, category));
+            return (_jsxs("section", { children: [_jsxs("h2", { className: "text-foreground mb-6 text-xl font-bold tracking-tight", children: [category, ' ', _jsxs("span", { className: "text-muted-foreground text-sm font-normal", children: ["(", categorySkills.length, ")"] })] }), _jsx("div", { className: "grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-3", children: categorySkills.map((skill) => (_jsx(SkillCard, { skill: skill, onSelect: onSkillSelect }, skill.name))) })] }, category));
         }) }));
 }

package/dist/src/presentation/web/components/features/skills/skills-page-client.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"skills-page-client.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/skills/skills-page-client.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,cAAc,CAAC;AAE7D,MAAM,WAAW,qBAAqB;IACpC,MAAM,EAAE,SAAS,EAAE,CAAC;CACrB;AAeD,wBAAgB,gBAAgB,CAAC,EAAE,MAAM,EAAE,EAAE,qBAAqB,2CAiFjE"}
+{"version":3,"file":"skills-page-client.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/skills/skills-page-client.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,cAAc,CAAC;AAE7D,MAAM,WAAW,qBAAqB;IACpC,MAAM,EAAE,SAAS,EAAE,CAAC;CACrB;AAeD,wBAAgB,gBAAgB,CAAC,EAAE,MAAM,EAAE,EAAE,qBAAqB,2CAyFjE"}

package/dist/src/presentation/web/components/features/skills/skills-page-client.js

@@ -46,7 +46,7 @@ export function SkillsPageClient({ skills }) {
     };
     // No skills installed at all
     if (skills.length === 0) {
-        return (_jsxs("div", { className: "flex flex-col gap-6 p-6", children: [_jsx(PageHeader, { title: "Skills", description: "Claude Code skills installed in this project" }), _jsx(EmptyState, { icon: _jsx(Puzzle, { className: "size-10" }), title: "No skills found", description: "No Claude Code skills are installed. Add skills to .claude/skills/ to get started." })] }));
+        return (_jsxs("div", { className: "flex flex-col gap-8 p-8", children: [_jsx(PageHeader, { eyebrow: "Developer Portal", title: "Skills", description: "Claude Code skills installed in this project" }), _jsx(EmptyState, { icon: _jsx(Puzzle, { className: "size-10" }), title: "No skills found", description: "No Claude Code skills are installed. Add skills to .claude/skills/ to get started." })] }));
     }
-    return (_jsxs("div", { className: "flex flex-col gap-6 p-6", children: [_jsx(PageHeader, { title: "Skills", description: "Claude Code skills installed in this project" }), _jsxs("div", { className: "relative", children: [_jsx(Search, { className: "text-muted-foreground absolute top-1/2 left-3 size-4 -translate-y-1/2" }), _jsx(Input, { placeholder: "Search skills...", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), className: "ps-9" })] }), _jsx(CategoryFilter, { activeCategory: activeCategory, onCategoryChange: setActiveCategory, counts: categoryCounts }), filteredSkills.length > 0 ? (_jsx(SkillList, { skills: filteredSkills, onSkillSelect: setSelectedSkill })) : (_jsx(EmptyState, { icon: _jsx(Search, { className: "size-10" }), title: "No matching skills", description: "No skills match your current search and filter criteria.", action: _jsx(Button, { variant: "outline", onClick: clearFilters, children: "Clear filters" }) })), _jsx(SkillDetailDrawer, { skill: selectedSkill, onClose: () => setSelectedSkill(null) })] }));
+    return (_jsxs("div", { className: "flex flex-col gap-8 p-8", children: [_jsx(PageHeader, { eyebrow: "Developer Portal", title: "Skills", description: "Claude Code skills installed in this project" }), _jsxs("div", { className: "relative", children: [_jsx(Search, { className: "text-muted-foreground absolute top-1/2 left-3 size-4 -translate-y-1/2" }), _jsx(Input, { placeholder: "Search skills...", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), className: "ps-9" })] }), _jsx(CategoryFilter, { activeCategory: activeCategory, onCategoryChange: setActiveCategory, counts: categoryCounts }), filteredSkills.length > 0 ? (_jsx(SkillList, { skills: filteredSkills, onSkillSelect: setSelectedSkill })) : (_jsx(EmptyState, { icon: _jsx(Search, { className: "size-10" }), title: "No matching skills", description: "No skills match your current search and filter criteria.", action: _jsx(Button, { variant: "outline", onClick: clearFilters, children: "Clear filters" }) })), _jsx(SkillDetailDrawer, { skill: selectedSkill, onClose: () => setSelectedSkill(null) })] }));
 }

package/dist/src/presentation/web/components/features/tools/tool-card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tool-card.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/tools/tool-card.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iEAAiE,CAAC;AAEhG,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,QAAQ,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AASD,wBAAgB,QAAQ,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,EAAE,aAAa,2CAkKrE"}
+{"version":3,"file":"tool-card.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/tools/tool-card.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iEAAiE,CAAC;AAEhG,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,QAAQ,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAcD,wBAAgB,QAAQ,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,EAAE,aAAa,2CAqOrE"}