@shipit-ai/cli 1.167.1 → 1.169.0-pr12.6d78faf

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"}

package/dist/src/presentation/web/components/features/tools/tool-card.js

@@ -1,16 +1,21 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useTransition } from 'react';
-import { LoaderCircle, Rocket, Download, Monitor, Terminal, GitBranch, CircleX, Circle, CircleCheck, Package, } from 'lucide-react';
+import { LoaderCircle, Rocket, Download, CircleX, Circle, CircleCheck, Package, Info, AlertTriangle, } from 'lucide-react';
 import { Button } from '../../ui/button.js';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../../ui/tooltip.js';
 import { cn } from '../../../lib/utils.js';
 import { ToolDetailDrawer } from './tool-detail-drawer.js';
-const TAG_CONFIG = {
-    ide: { label: 'IDE', icon: Monitor },
-    'cli-agent': { label: 'CLI Agent', icon: Terminal },
-    vcs: { label: 'VCS', icon: GitBranch },
-    terminal: { label: 'Terminal', icon: Terminal },
+/*
+ * Tag labels for the TOOL card "Tag" micro-label row.
+ * The tool-detail drawer keeps its own richer tag config (with icons) for its
+ * detail view. This map is intentionally small — just label mapping.
+ */
+const TAG_LABELS = {
+    ide: 'IDE',
+    'cli-agent': 'CLI Agent',
+    vcs: 'VCS',
+    terminal: 'Terminal',
 };
 export function ToolCard({ tool, onRefresh, className }) {
     const [drawerOpen, setDrawerOpen] = useState(false);
@@ -34,9 +39,13 @@ export function ToolCard({ tool, onRefresh, className }) {
         setAutoStartInstall(tool.autoInstall);
         setDrawerOpen(true);
     }
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { "data-testid": "tool-card", onClick: handleCardClick, className: cn('bg-card group flex h-30 w-full cursor-pointer flex-col rounded-lg border p-3 transition-shadow hover:shadow-md', className), children: [_jsxs("div", { className: "mb-2 flex items-start justify-between gap-2", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [tool.iconUrl ? (_jsx("img", { src: tool.iconUrl, alt: "", width: 20, height: 20, className: "shrink-0 dark:invert" })) : (_jsx(Package, { className: "text-muted-foreground h-5 w-5 shrink-0" })), _jsx("h3", { "data-testid": "tool-card-name", className: "truncate text-sm font-bold", children: tool.name })] }), _jsx("div", { "data-testid": "tool-card-tags", className: "flex shrink-0 items-center gap-1", children: tool.tags.map((tag) => {
-                                    const config = TAG_CONFIG[tag] ?? { label: tag, icon: Monitor };
-                                    const TagIcon = config.icon;
-                                    return (_jsxs("span", { className: "text-muted-foreground/70 inline-flex items-center gap-0.5 text-[9px]", children: [_jsx(TagIcon, { className: "h-2.5 w-2.5" }), config.label] }, tag));
-                                }) })] }), _jsx("p", { "data-testid": "tool-card-summary", className: "text-muted-foreground mt-1 truncate text-xs", children: tool.summary }), _jsxs("div", { className: "mt-auto flex items-center justify-between pt-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [isError && tool.status.status === 'error' ? (_jsxs("span", { className: "flex items-center gap-1 truncate text-[10px] text-red-600 dark:text-red-400", title: tool.status.errorMessage, children: [_jsx(CircleX, { className: "h-3 w-3 shrink-0" }), tool.status.errorMessage ?? 'Error'] })) : isInstalled ? (_jsxs("span", { className: "flex items-center gap-1 text-[10px] text-emerald-600 dark:text-emerald-400", children: [_jsx(CircleCheck, { className: "h-3 w-3" }), "Installed"] })) : (_jsxs("span", { className: "text-muted-foreground flex items-center gap-1 text-[10px]", children: [_jsx(Circle, { className: "h-3 w-3" }), "Not installed"] })), tool.required ? (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("span", { className: "rounded bg-amber-100 px-1.5 py-0.5 text-[9px] font-medium text-amber-700 dark:bg-amber-900/50 dark:text-amber-400", children: "Required" }) }), _jsx(TooltipContent, { side: "top", children: "This tool is required for ShipIT to function properly" })] }) })) : null] }), _jsx("div", { className: "flex items-center gap-1", children: isInstalled && canLaunch ? (_jsxs(Button, { size: "sm", variant: "outline", onClick: handleLaunch, disabled: isPending, "aria-label": `Launch ${tool.name}`, "data-testid": "tool-card-launch-button", className: "h-7 cursor-pointer rounded-md px-3 text-xs", children: [isPending ? (_jsx(LoaderCircle, { className: "me-1 h-3 w-3 animate-spin" })) : (_jsx(Rocket, { className: "me-1 h-3 w-3" })), "Launch"] })) : !isInstalled && !isError ? (_jsxs(Button, { size: "sm", variant: "default", onClick: handleInstallClick, "aria-label": `Install ${tool.name}`, "data-testid": "tool-card-install-button", className: "h-7 cursor-pointer rounded-md px-3 text-xs", children: [_jsx(Download, { className: "me-1 h-3 w-3" }), "Install"] })) : null })] })] }), _jsx(ToolDetailDrawer, { tool: tool, open: drawerOpen, onClose: () => setDrawerOpen(false), onRefresh: onRefresh, autoStart: autoStartInstall })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { "data-testid": "tool-card", onClick: handleCardClick, className: cn('bg-card editorial-shadow group flex w-full cursor-pointer flex-col gap-4 rounded-xl p-5', 'transition-all duration-300 hover:-translate-y-0.5 hover:shadow-md hover:ring-slate-300 dark:hover:ring-slate-600', className), children: [_jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [_jsx("div", { className: "flex h-11 w-11 shrink-0 items-center justify-center rounded-lg bg-slate-100 p-2 ring-1 ring-slate-200/50 dark:bg-slate-800 dark:ring-slate-700/50", children: tool.iconUrl ? (_jsx("img", { src: tool.iconUrl, alt: "", width: 28, height: 28, className: "h-full w-full" })) : (_jsx(Package, { className: "text-muted-foreground h-full w-full" })) }), _jsxs("div", { className: "min-w-0", children: [_jsx("h3", { "data-testid": "tool-card-name", className: "text-foreground truncate text-sm leading-tight font-bold tracking-tight", children: tool.name }), tool.author ? (_jsxs("div", { className: "mt-1 flex items-center gap-1.5", children: [_jsx("span", { "data-testid": "tool-card-vendor-label", className: "text-[9px] font-bold tracking-wider text-slate-400 uppercase", children: "Vendor" }), _jsx("span", { "data-testid": "tool-card-vendor", className: "text-muted-foreground truncate text-xs font-medium", children: tool.author })] })) : tool.tags.length > 0 ? (_jsxs("div", { className: "mt-1 flex items-center gap-1.5", children: [_jsx("span", { className: "text-[9px] font-bold tracking-wider text-slate-400 uppercase", children: "Tag" }), _jsx("span", { "data-testid": "tool-card-tags", className: "text-muted-foreground truncate text-xs font-medium", children: tool.tags.map((tag) => TAG_LABELS[tag] ?? tag).join(' · ') })] })) : null] })] }), _jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [isError && tool.status.status === 'error' ? (_jsxs("span", { className: "flex items-center gap-1 text-[10px] font-medium text-red-600 dark:text-red-400", title: tool.status.errorMessage, children: [_jsx(CircleX, { className: "h-3 w-3 shrink-0" }), "Error"] })) : isInstalled ? (_jsxs("span", { className: "flex items-center gap-1 text-[10px] font-medium text-emerald-600 dark:text-emerald-400", children: [_jsx(CircleCheck, { className: "h-3 w-3" }), "Installed"] })) : (_jsxs("span", { className: "text-muted-foreground flex items-center gap-1 text-[10px] font-medium", children: [_jsx(Circle, { className: "h-3 w-3" }), "Not installed"] })), tool.required ? (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("span", { className: "shrink-0 rounded-full bg-amber-100 px-2 py-0.5 text-[9px] font-bold tracking-wider text-amber-700 uppercase dark:bg-amber-900/40 dark:text-amber-400", children: "Required" }) }), _jsx(TooltipContent, { side: "top", children: "This tool is required for ShipIT to function properly" })] }) })) : null] })] }), _jsx("p", { "data-testid": "tool-card-summary", className: "text-muted-foreground -mt-2 line-clamp-2 text-xs leading-relaxed", children: tool.summary }), _jsx("div", { className: "mt-auto flex flex-col gap-1.5", children: isInstalled && canLaunch ? (_jsxs(Button, { variant: "default", onClick: handleLaunch, disabled: isPending, "aria-label": `Launch ${tool.name}`, "data-testid": "tool-card-launch-button", className: "h-9 w-full cursor-pointer rounded-lg text-xs font-bold tracking-wide transition-all duration-300 hover:-translate-y-0.5 hover:shadow-md", children: [isPending ? (_jsx(LoaderCircle, { className: "me-1 h-3.5 w-3.5 animate-spin" })) : (_jsx(Rocket, { className: "me-1 h-3.5 w-3.5" })), "Launch"] })) : !isInstalled && !isError ? (_jsxs(Button, { variant: "default", onClick: handleInstallClick, "aria-label": `Install ${tool.name}`, "data-testid": "tool-card-install-button", className: "h-9 w-full cursor-pointer rounded-lg text-xs font-bold tracking-wide transition-all duration-300 hover:-translate-y-0.5 hover:shadow-md", children: [_jsx(Download, { className: "me-1 h-3.5 w-3.5" }), "Install"] })) : isError ? (_jsxs(Button, { variant: "outline", onClick: (e) => {
+                                e.stopPropagation();
+                                setAutoStartInstall(false);
+                                setDrawerOpen(true);
+                            }, "aria-label": `View error details for ${tool.name}`, "data-testid": "tool-card-error-button", className: "h-9 w-full cursor-pointer rounded-lg border-red-300 text-xs font-bold tracking-wide text-red-600 transition-all duration-300 hover:-translate-y-0.5 hover:bg-red-50 hover:shadow-md dark:border-red-900 dark:text-red-400 dark:hover:bg-red-950/30", children: [_jsx(AlertTriangle, { className: "me-1 h-3.5 w-3.5" }), "View Error"] })) : (_jsxs(Button, { variant: "outline", onClick: (e) => {
+                                e.stopPropagation();
+                                setAutoStartInstall(false);
+                                setDrawerOpen(true);
+                            }, "aria-label": `View details for ${tool.name}`, "data-testid": "tool-card-details-button", className: "h-9 w-full cursor-pointer rounded-lg text-xs font-bold tracking-wide transition-all duration-300 hover:-translate-y-0.5 hover:shadow-md", children: [_jsx(Info, { className: "me-1 h-3.5 w-3.5" }), "View Details"] })) })] }), _jsx(ToolDetailDrawer, { tool: tool, open: drawerOpen, onClose: () => setDrawerOpen(false), onRefresh: onRefresh, autoStart: autoStartInstall })] }));
 }

package/dist/src/presentation/web/components/features/tools/tool-detail-drawer.js

@@ -82,7 +82,7 @@ export function ToolDetailDrawer({ tool, open, onClose, onRefresh, autoStart, })
             void onRefresh();
         }
     }, [status, onRefresh]);
-    const header = (_jsxs("div", { className: "flex flex-col gap-1.5 pe-6", children: [_jsxs("div", { className: "flex items-center gap-2", children: [tool.iconUrl ? (_jsx("img", { src: tool.iconUrl, alt: "", width: 24, height: 24, className: "shrink-0 dark:invert" })) : (_jsx(Package, { className: "text-muted-foreground h-6 w-6 shrink-0" })), _jsx("h2", { className: "text-base font-bold", children: tool.name }), _jsx(StatusBadge, { status: tool.status.status })] }), _jsx("div", { className: "flex items-center gap-2", children: tool.tags.map((tag) => {
+    const header = (_jsxs("div", { className: "flex flex-col gap-1.5 pe-6", children: [_jsxs("div", { className: "flex items-center gap-2", children: [tool.iconUrl ? (_jsx("img", { src: tool.iconUrl, alt: "", width: 24, height: 24, className: "shrink-0" })) : (_jsx(Package, { className: "text-muted-foreground h-6 w-6 shrink-0" })), _jsx("h2", { className: "text-base font-bold", children: tool.name }), _jsx(StatusBadge, { status: tool.status.status })] }), _jsx("div", { className: "flex items-center gap-2", children: tool.tags.map((tag) => {
                     const config = TAG_CONFIG[tag] ?? { label: tag, icon: Monitor };
                     const TagIcon = config.icon;
                     return (_jsxs("span", { className: "text-muted-foreground/70 inline-flex items-center gap-0.5 text-[10px]", children: [_jsx(TagIcon, { className: "h-3 w-3" }), config.label] }, tag));

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

@@ -1 +1 @@
-{"version":3,"file":"tools-page-client.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/tools/tools-page-client.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iEAAiE,CAAC;AAEhG,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAYD,wBAAgB,eAAe,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,EAAE,oBAAoB,2CA+EvF"}
+{"version":3,"file":"tools-page-client.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/tools/tools-page-client.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iEAAiE,CAAC;AAEhG,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAYD,wBAAgB,eAAe,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,EAAE,oBAAoB,2CAkIvF"}

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

@@ -28,5 +28,10 @@ export function ToolsPageClient({ tools: initialTools, className }) {
         }
     }, []);
     const filtered = tools.filter(TAB_FILTER[activeTab]);
-    return (_jsxs("div", { "data-testid": "tools-page-client", className: cn('space-y-4', className), children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Wrench, { className: "text-muted-foreground h-4 w-4" }), _jsx("h1", { className: "text-sm font-bold tracking-tight", children: "Tools" }), _jsxs("span", { className: "text-muted-foreground text-[10px]", children: [tools.filter((t) => t.status.status === 'available').length, "/", tools.length, " installed"] })] }), _jsxs(Tabs, { value: activeTab, onValueChange: (value) => setActiveTab(value), "data-testid": "tools-page-tabs", children: [_jsxs(TabsList, { className: "h-7", children: [_jsx(TabsTrigger, { value: "all", "data-testid": "tools-tab-all", className: "px-2.5 text-xs", children: "All" }), _jsx(TabsTrigger, { value: "ide", "data-testid": "tools-tab-ide", className: "px-2.5 text-xs", children: "IDEs" }), _jsx(TabsTrigger, { value: "cli-agent", "data-testid": "tools-tab-cli-agent", className: "px-2.5 text-xs", children: "CLI Agents" }), _jsx(TabsTrigger, { value: "vcs", "data-testid": "tools-tab-vcs", className: "px-2.5 text-xs", children: "Version Control" }), _jsx(TabsTrigger, { value: "terminal", "data-testid": "tools-tab-terminal", className: "px-2.5 text-xs", children: "Terminals" })] }), _jsx(TabsContent, { value: activeTab, className: "mt-3", children: filtered.length === 0 ? (_jsxs("div", { "data-testid": "tools-page-empty", className: "text-muted-foreground flex flex-col items-center justify-center py-12 text-center", children: [_jsx(Wrench, { className: "mb-2 h-6 w-6 opacity-20" }), _jsx("p", { className: "text-xs", children: "No tools in this category." })] })) : (_jsx("div", { "data-testid": "tools-page-grid", className: "grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4", children: filtered.map((tool) => (_jsx(ToolCard, { tool: tool, onRefresh: refreshTools }, tool.id))) })) })] })] }));
+    const installedCount = tools.filter((t) => t.status.status === 'available').length;
+    return (_jsxs("div", { "data-testid": "tools-page-client", className: cn('space-y-8', className), children: [_jsxs("div", { className: "space-y-1.5", children: [_jsx("div", { className: "flex items-center gap-2", 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: "Tools" }), _jsxs("span", { className: "text-muted-foreground text-sm font-medium", children: [installedCount, " of ", tools.length, " installed"] })] })] }), _jsxs(Tabs, { value: activeTab, onValueChange: (value) => setActiveTab(value), "data-testid": "tools-page-tabs", children: [_jsxs(TabsList, { "data-editorial": "true", className: "bg-card editorial-shadow h-10 p-1", children: [_jsx(TabsTrigger, { value: "all", "data-testid": "tools-tab-all", className: "cursor-pointer px-4 text-xs font-bold", children: "All" }), _jsx(TabsTrigger, { value: "ide", "data-testid": "tools-tab-ide", className: "cursor-pointer px-4 text-xs font-bold", children: "IDEs" }), _jsx(TabsTrigger, { value: "cli-agent", "data-testid": "tools-tab-cli-agent", className: "cursor-pointer px-4 text-xs font-bold", children: "CLI Agents" }), _jsx(TabsTrigger, { value: "vcs", "data-testid": "tools-tab-vcs", className: "cursor-pointer px-4 text-xs font-bold", children: "Version Control" }), _jsx(TabsTrigger, { value: "terminal", "data-testid": "tools-tab-terminal", className: "cursor-pointer px-4 text-xs font-bold", children: "Terminals" })] }), _jsx(TabsContent, { value: activeTab, className: "mt-6", children: filtered.length === 0 ? (_jsxs("div", { "data-testid": "tools-page-empty", className: "text-muted-foreground flex flex-col items-center justify-center py-16 text-center", children: [_jsx(Wrench, { className: "mb-3 h-8 w-8 opacity-20" }), _jsx("p", { className: "text-sm", children: "No tools in this category." })] })) : (_jsx("div", { "data-testid": "tools-page-grid", 
+                            // Editorial density: 3 columns max so cards stay wide enough to
+                            // give the Stitch "magazine" feel. Previously xl:grid-cols-4 which
+                            // squeezed cards and reduced background-vs-card contrast.
+                            className: "grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-3", children: filtered.map((tool) => (_jsx(ToolCard, { tool: tool, onRefresh: refreshTools }, tool.id))) })) })] })] }));
 }

package/dist/src/presentation/web/components/layouts/app-sidebar/app-sidebar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"app-sidebar.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/layouts/app-sidebar/app-sidebar.tsx"],"names":[],"mappings":"AA2CA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2CAA2C,CAAC;AAI/E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAE7D,MAAM,WAAW,WAAW;IAC1B,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,aAAa,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,EAAE,MAAM,CAAC;IACvB,cAAc,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,WAAW,EAAE,CAAC;IACxB,YAAY,EAAE,iBAAiB,CAAC;IAEhC,cAAc,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9C;AAED,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,YAAY,EAEZ,cAAc,GACf,EAAE,eAAe,2CAyQjB"}
+{"version":3,"file":"app-sidebar.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/layouts/app-sidebar/app-sidebar.tsx"],"names":[],"mappings":"AA2CA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2CAA2C,CAAC;AAI/E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAE7D,MAAM,WAAW,WAAW;IAC1B,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,aAAa,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,EAAE,MAAM,CAAC;IACvB,cAAc,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,WAAW,EAAE,CAAC;IACxB,YAAY,EAAE,iBAAiB,CAAC;IAEhC,cAAc,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9C;AAED,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,YAAY,EAEZ,cAAc,GACf,EAAE,eAAe,2CA8RjB"}

package/dist/src/presentation/web/components/layouts/app-sidebar/app-sidebar.js

@@ -2,9 +2,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useMemo } from 'react';
 import { usePathname } from 'next/navigation';
-import { Home, Moon, Sun, Volume2, VolumeOff, Zap, ZapOff, Wrench, Puzzle, Settings, } from 'lucide-react';
+import { Home, Moon, Sun, Volume2, VolumeOff, Zap, ZapOff, Wrench, Puzzle, Blocks, Settings, } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
-import { Sidebar, SidebarHeader, SidebarContent, SidebarFooter, SidebarMenu, SidebarMenuItem, SidebarMenuButton, SidebarRail, useSidebar, } from '../../ui/sidebar.js';
+import { Sidebar, SidebarHeader, SidebarContent, SidebarFooter, SidebarMenu, SidebarMenuItem, SidebarMenuButton, useSidebar, } from '../../ui/sidebar.js';
 import { ScrollArea } from '../../ui/scroll-area.js';
 import { SidebarNavItem } from '../../common/sidebar-nav-item/index.js';
 import { SidebarCollapseToggle } from '../../common/sidebar-collapse-toggle/index.js';
@@ -60,50 +60,46 @@ export function AppSidebar({ features, featureFlags, onFeatureClick, }) {
                 .filter((g) => g.items.length > 0),
         }));
     }, [features, t]);
-    return (_jsxs(Sidebar, { "data-testid": "app-sidebar", "data-no-drawer-close": true, collapsible: "icon", side: i18n.dir() === 'rtl' ? 'right' : 'left', children: [_jsx(SidebarHeader, { children: _jsxs(SidebarMenu, { children: [_jsx(SidebarMenuItem, { children: _jsxs("div", { className: "flex h-8 items-center group-data-[collapsible=icon]:justify-center", children: [showExpanded ? (_jsxs("div", { className: [
-                                            'flex min-w-0 flex-1 items-center gap-2 overflow-hidden px-2',
-                                            'transition-opacity duration-200 ease-out',
-                                            expandedVisible ? 'opacity-100' : 'opacity-0',
-                                        ].join(' '), "aria-hidden": !expandedVisible, children: [_jsx(ShipitAiLogo, { className: "shrink-0 drop-shadow-[0_0_4px_rgba(34,211,238,0.4)]", size: 28, variant: versionData.isDev ? 'dev' : 'default' }), _jsx("span", { className: "truncate text-sm font-semibold tracking-tight", children: "ShipIT" }), _jsx(VersionBadge, { version: versionData.version, branch: versionData.branch || undefined, commitHash: versionData.commitHash || undefined, isDev: versionData.isDev, packageName: versionData.packageName, description: versionData.description, instancePath: versionData.instancePath || undefined })] })) : null, _jsx(SidebarCollapseToggle, { className: "shrink-0 transition-all duration-200" })] }) }), _jsx(SidebarNavItem, { icon: Home, label: t('navigation.controlCenter'), href: "/", active: pathname === '/' }), _jsx(SidebarNavItem, { icon: Wrench, label: t('navigation.tools'), href: "/tools", active: pathname === '/tools' }), featureFlags.skills ? (_jsx(SidebarNavItem, { icon: Puzzle, label: t('navigation.skills'), href: "/skills", active: pathname === '/skills' })) : null, _jsx(SidebarNavItem, { icon: Settings, label: t('navigation.settings'), href: "/settings", active: pathname === '/settings' })] }) }), _jsx(SidebarContent, { children: showExpanded ? (_jsx("div", { className: [
+    return (_jsxs(Sidebar, { "data-testid": "app-sidebar", "data-no-drawer-close": true, collapsible: "icon", side: i18n.dir() === 'rtl' ? 'right' : 'left', children: [_jsx(SidebarHeader, { children: _jsxs(SidebarMenu, { children: [_jsx(SidebarMenuItem, { children: _jsxs("div", { className: "flex h-10 items-center px-2 group-data-[collapsible=icon]:justify-center", children: [_jsx(ShipitAiLogo, { className: "drop-shadow-[0_0_4px_rgba(34,211,238,0.4)]", size: 32, variant: versionData.isDev ? 'dev' : 'default', isOpen: Boolean(showExpanded && expandedVisible) }), showExpanded && expandedVisible ? (_jsx(VersionBadge, { version: versionData.version, branch: versionData.branch || undefined, commitHash: versionData.commitHash || undefined, isDev: versionData.isDev, packageName: versionData.packageName, description: versionData.description, instancePath: versionData.instancePath || undefined })) : null] }) }), _jsx(SidebarNavItem, { icon: Home, label: t('navigation.controlCenter'), href: "/", active: pathname === '/' }), _jsx(SidebarNavItem, { icon: Wrench, label: t('navigation.tools'), href: "/tools", active: pathname === '/tools' }), featureFlags.skills ? (_jsx(SidebarNavItem, { icon: Puzzle, label: t('navigation.skills'), href: "/skills", active: pathname === '/skills' })) : null, featureFlags.plugins ? (_jsx(SidebarNavItem, { icon: Blocks, label: t('navigation.plugins'), href: "/plugins", active: pathname === '/plugins' })) : null, _jsx(SidebarNavItem, { icon: Settings, label: t('navigation.settings'), href: "/settings", active: pathname === '/settings' })] }) }), _jsx(SidebarContent, { children: showExpanded ? (_jsx("div", { className: [
                         'flex min-h-0 flex-1 flex-col overflow-hidden transition-opacity duration-200 ease-out',
                         '[&_[data-sidebar=group-label]]:!mt-0 [&_[data-sidebar=group-label]]:!opacity-100 [&_[data-sidebar=group-label]]:!transition-none',
                         expandedVisible ? 'opacity-100' : 'opacity-0',
-                    ].join(' '), children: repoGroups.length > 0 && (_jsxs(_Fragment, { children: [_jsx(SidebarSectionHeader, { label: t('sidebar.features') }), _jsx(ScrollArea, { className: "min-h-0 flex-1", children: repoGroups.map(({ repoPath, repoName, featureCount, statusGroups }) => (_jsx(RepoGroup, { repoName: repoName, featureCount: featureCount, children: statusGroups.map(({ statusKey, label, items }) => (_jsx(FeatureStatusGroup, { label: label, count: items.length, children: items.map((feature) => (_jsx(FeatureListItem, { name: feature.name, status: feature.status, startedAt: feature.startedAt, duration: feature.duration, agentType: feature.agentType, modelId: feature.modelId, onClick: onFeatureClick ? () => onFeatureClick(feature.featureId) : undefined }, feature.featureId))) }, statusKey))) }, repoPath))) })] })) })) : null }), _jsx(SidebarFooter, { className: "border-t p-2", children: _jsx(SidebarMenu, { children: _jsx(SidebarMenuItem, { children: _jsx("div", { className: "flex items-center gap-1", children: _jsxs(TooltipProvider, { children: [_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs(SidebarMenuButton, { className: "w-auto flex-none", onClick: (e) => {
-                                                        const currentResolved = theme === 'system' ? resolvedTheme : theme;
-                                                        const goingToDark = currentResolved !== 'dark';
-                                                        const newTheme = theme === 'system'
-                                                            ? resolvedTheme === 'dark'
-                                                                ? 'light'
-                                                                : 'dark'
-                                                            : theme === 'dark'
-                                                                ? 'light'
-                                                                : 'dark';
-                                                        if (goingToDark) {
-                                                            toggleOnSound.play();
-                                                        }
-                                                        else {
-                                                            toggleOffSound.play();
-                                                        }
-                                                        const prefersReducedMotion = typeof window !== 'undefined' &&
-                                                            window.matchMedia('(prefers-reduced-motion: reduce)').matches;
-                                                        if (!('startViewTransition' in document) || prefersReducedMotion) {
-                                                            setTheme(newTheme);
-                                                            return;
-                                                        }
-                                                        document.documentElement.style.setProperty('--x', `${e.clientX}px`);
-                                                        document.documentElement.style.setProperty('--y', `${e.clientY}px`);
-                                                        document.startViewTransition(() => {
-                                                            setTheme(newTheme);
-                                                        });
-                                                    }, "aria-label": resolvedTheme === 'dark'
+                    ].join(' '), children: repoGroups.length > 0 && (_jsxs(_Fragment, { children: [_jsx(SidebarSectionHeader, { label: t('sidebar.features') }), _jsx(ScrollArea, { className: "min-h-0 flex-1", children: repoGroups.map(({ repoPath, repoName, featureCount, statusGroups }) => (_jsx(RepoGroup, { repoName: repoName, featureCount: featureCount, children: statusGroups.map(({ statusKey, label, items }) => (_jsx(FeatureStatusGroup, { label: label, count: items.length, children: items.map((feature) => (_jsx(FeatureListItem, { name: feature.name, status: feature.status, startedAt: feature.startedAt, duration: feature.duration, agentType: feature.agentType, modelId: feature.modelId, onClick: onFeatureClick ? () => onFeatureClick(feature.featureId) : undefined }, feature.featureId))) }, statusKey))) }, repoPath))) })] })) })) : null }), _jsx(SidebarFooter, { className: "border-t border-slate-200/50 p-2 dark:border-slate-800/50", children: _jsxs(SidebarMenu, { children: [_jsx(SidebarMenuItem, { children: _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs(SidebarMenuButton, { className: "w-auto flex-none", onClick: (e) => {
+                                                            const currentResolved = theme === 'system' ? resolvedTheme : theme;
+                                                            const goingToDark = currentResolved !== 'dark';
+                                                            const newTheme = theme === 'system'
+                                                                ? resolvedTheme === 'dark'
+                                                                    ? 'light'
+                                                                    : 'dark'
+                                                                : theme === 'dark'
+                                                                    ? 'light'
+                                                                    : 'dark';
+                                                            if (goingToDark) {
+                                                                toggleOnSound.play();
+                                                            }
+                                                            else {
+                                                                toggleOffSound.play();
+                                                            }
+                                                            const prefersReducedMotion = typeof window !== 'undefined' &&
+                                                                window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+                                                            if (!('startViewTransition' in document) || prefersReducedMotion) {
+                                                                setTheme(newTheme);
+                                                                return;
+                                                            }
+                                                            document.documentElement.style.setProperty('--x', `${e.clientX}px`);
+                                                            document.documentElement.style.setProperty('--y', `${e.clientY}px`);
+                                                            document.startViewTransition(() => {
+                                                                setTheme(newTheme);
+                                                            });
+                                                        }, "aria-label": resolvedTheme === 'dark'
+                                                            ? t('sidebar.switchToLight')
+                                                            : t('sidebar.switchToDark'), children: [_jsx(Sun, { className: "h-4 w-4 scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" }), _jsx(Moon, { className: "absolute h-4 w-4 scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" })] }) }), _jsx(TooltipContent, { side: "top", children: resolvedTheme === 'dark'
                                                         ? t('sidebar.switchToLight')
-                                                        : t('sidebar.switchToDark'), children: [_jsx(Sun, { className: "h-4 w-4 scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" }), _jsx(Moon, { className: "absolute h-4 w-4 scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" })] }) }), _jsx(TooltipContent, { side: "top", children: resolvedTheme === 'dark'
-                                                    ? t('sidebar.switchToLight')
-                                                    : t('sidebar.switchToDark') })] }), !collapsed && (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(SidebarMenuButton, { className: "w-auto flex-none", onClick: () => {
-                                                        clickSound.play();
-                                                        toggleSound();
-                                                    }, "aria-label": soundEnabled ? t('sidebar.muteSounds') : t('sidebar.unmuteSounds'), children: soundEnabled ? (_jsx(Volume2, { className: "h-4 w-4" })) : (_jsx(VolumeOff, { className: "h-4 w-4" })) }) }), _jsx(TooltipContent, { side: "top", children: soundEnabled ? t('sidebar.muteSounds') : t('sidebar.unmuteSounds') })] })), !collapsed && (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(SidebarMenuButton, { className: "w-auto flex-none", onClick: () => {
-                                                        clickSound.play();
-                                                        toggleAnimations();
-                                                    }, "aria-label": animationsEnabled ? 'Disable animations' : 'Enable animations', children: animationsEnabled ? (_jsx(Zap, { className: "h-4 w-4" })) : (_jsx(ZapOff, { className: "h-4 w-4" })) }) }), _jsx(TooltipContent, { side: "top", children: animationsEnabled ? 'Disable animations' : 'Enable animations' })] }))] }) }) }) }) }), _jsx(SidebarRail, {})] }));
+                                                        : t('sidebar.switchToDark') })] }) }), _jsx(SidebarCollapseToggle, { className: "flex-none transition-all duration-200" })] }) }), !collapsed && (_jsx(SidebarMenuItem, { children: _jsx("div", { className: "flex items-center gap-1", children: _jsxs(TooltipProvider, { children: [_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(SidebarMenuButton, { className: "w-auto flex-none", onClick: () => {
+                                                            clickSound.play();
+                                                            toggleSound();
+                                                        }, "aria-label": soundEnabled ? t('sidebar.muteSounds') : t('sidebar.unmuteSounds'), children: soundEnabled ? (_jsx(Volume2, { className: "h-4 w-4" })) : (_jsx(VolumeOff, { className: "h-4 w-4" })) }) }), _jsx(TooltipContent, { side: "top", children: soundEnabled ? t('sidebar.muteSounds') : t('sidebar.unmuteSounds') })] }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(SidebarMenuButton, { className: "w-auto flex-none", onClick: () => {
+                                                            clickSound.play();
+                                                            toggleAnimations();
+                                                        }, "aria-label": animationsEnabled ? 'Disable animations' : 'Enable animations', children: animationsEnabled ? (_jsx(Zap, { className: "h-4 w-4" })) : (_jsx(ZapOff, { className: "h-4 w-4" })) }) }), _jsx(TooltipContent, { side: "top", children: animationsEnabled ? 'Disable animations' : 'Enable animations' })] })] }) }) }))] }) })] }));
 }

package/dist/src/presentation/web/components/layouts/app-sidebar/app-sidebar.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"app-sidebar.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/layouts/app-sidebar/app-sidebar.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAgB3C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CAyBjC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AA+DnC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAIlC,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAOvB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAInB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAqB3B,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KA6BrB,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAmElC,CAAC"}
+{"version":3,"file":"app-sidebar.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/layouts/app-sidebar/app-sidebar.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAiB3C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CAyBjC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AA+DnC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAIlC,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAOvB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAInB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAqB3B,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KA6BrB,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAmElC,CAAC"}

package/dist/src/presentation/web/components/layouts/app-sidebar/app-sidebar.stories.js

@@ -9,6 +9,7 @@ const defaultFeatureFlags = {
     adoptBranch: false,
     gitRebaseSync: false,
     reactFileManager: false,
+    plugins: false,
 };
 const meta = {
     title: 'Layout/AppSidebar',

package/dist/src/presentation/web/components/ui/card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../../../../src/presentation/web/components/ui/card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,QAAA,MAAM,IAAI,6GAQT,CAAC;AAGF,QAAA,MAAM,UAAU,6GAIf,CAAC;AAGF,QAAA,MAAM,SAAS,6GAQd,CAAC;AAGF,QAAA,MAAM,eAAe,6GAIpB,CAAC;AAGF,QAAA,MAAM,WAAW,6GAIhB,CAAC;AAGF,QAAA,MAAM,UAAU,6GAIf,CAAC;AAGF,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,eAAe,EAAE,WAAW,EAAE,CAAC"}
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../../../../src/presentation/web/components/ui/card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,QAAA,MAAM,IAAI,6GAQT,CAAC;AAGF,QAAA,MAAM,UAAU,6GAIf,CAAC;AAGF,QAAA,MAAM,SAAS,6GAQd,CAAC;AAGF,QAAA,MAAM,eAAe,6GAIpB,CAAC;AAGF,QAAA,MAAM,WAAW,6GAIhB,CAAC;AAGF,QAAA,MAAM,UAAU,6GAIf,CAAC;AAGF,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,eAAe,EAAE,WAAW,EAAE,CAAC"}

package/dist/src/presentation/web/components/ui/card.js

@@ -1,7 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { cn } from '../../lib/utils.js';
-const Card = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn('bg-card text-card-foreground rounded-xl border shadow', className), ...props })));
+/*
+ * Card — shadcn primitive extended with Stitch's editorial-shadow utility.
+ * The `editorial-shadow` class (globals.css) replaces the old `shadow` class
+ * with a subtle shadow + ring combination that gives cards a "lifted" look
+ * and renders consistently against the editorial surface palette in both
+ * light and dark modes. The `border` class stays for explicit border visibility
+ * in dense grids; editorial-shadow's ring provides the soft lift on top.
+ */
+const Card = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn('bg-card text-card-foreground editorial-shadow rounded-xl border', className), ...props })));
 Card.displayName = 'Card';
 const CardHeader = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn('flex flex-col space-y-1.5 p-6', className), ...props })));
 CardHeader.displayName = 'CardHeader';

package/dist/src/presentation/web/components/ui/drawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../../../../src/presentation/web/components/ui/drawer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,MAAM,CAAC;AAIjD,iBAAS,MAAM,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,2CAE9E;AAED,iBAAS,aAAa,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,2CAExF;AAED,iBAAS,YAAY,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,MAAM,CAAC,2CAEtF;AAED,iBAAS,WAAW,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,2CAEpF;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,2CAQtD;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,QAAQ,EACR,SAAoB,EACpB,eAAsB,EACtB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,GAAG;IACxD,SAAS,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAChD,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,2CAiCA;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQzE;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQzE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,2CAQ/F;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,WAAW,CAAC,2CAQ1D;AAED,OAAO,EACL,MAAM,EACN,YAAY,EACZ,aAAa,EACb,WAAW,EACX,aAAa,EACb,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,iBAAiB,GAClB,CAAC"}
+{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../../../../src/presentation/web/components/ui/drawer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,MAAM,CAAC;AAIjD,iBAAS,MAAM,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,2CAE9E;AAED,iBAAS,aAAa,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,2CAExF;AAED,iBAAS,YAAY,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,MAAM,CAAC,2CAEtF;AAED,iBAAS,WAAW,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,2CAEpF;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,2CAWtD;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,QAAQ,EACR,SAAoB,EACpB,eAAsB,EACtB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,GAAG;IACxD,SAAS,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAChD,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,2CAuCA;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQzE;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQzE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,2CAQ/F;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,WAAW,CAAC,2CAQ1D;AAED,OAAO,EACL,MAAM,EACN,YAAY,EACZ,aAAa,EACb,WAAW,EACX,aAAa,EACb,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,iBAAiB,GAClB,CAAC"}

package/dist/src/presentation/web/components/ui/drawer.js

@@ -16,10 +16,16 @@ function DrawerClose({ ...props }) {
     return _jsx(DrawerPrimitive.Close, { "data-slot": "drawer-close", ...props });
 }
 function DrawerOverlay({ className, ...props }) {
-    return (_jsx(DrawerPrimitive.Overlay, { "data-slot": "drawer-overlay", className: cn('fixed inset-0 z-50 bg-black/50', className), ...props }));
+    return (_jsx(DrawerPrimitive.Overlay, { "data-slot": "drawer-overlay", className: cn('fixed inset-0 z-50 bg-black/40 backdrop-blur-[2px] dark:bg-black/50', className), ...props }));
 }
 function DrawerContent({ className, children, direction = 'bottom', showCloseButton = true, ...props }) {
-    return (_jsx(DrawerPortal, { children: _jsxs(DrawerPrimitive.Content, { "data-slot": "drawer-content", className: cn('bg-background fixed z-50 flex flex-col shadow-lg', direction === 'bottom' && 'inset-x-0 bottom-0 mb-24 rounded-t-lg border-t', direction === 'top' && 'inset-x-0 top-0 mt-24 rounded-b-lg border-b', direction === 'right' && 'inset-y-0 right-0 h-full w-3/4 border-l', direction === 'left' && 'inset-y-0 left-0 h-full w-3/4 border-r', className), style: {
+    return (_jsx(DrawerPortal, { children: _jsxs(DrawerPrimitive.Content, { "data-slot": "drawer-content", className: cn(
+            // Editorial drawer: glass-blur backdrop in light mode for a polished
+            // semi-transparent feel that lets underlying content bleed through.
+            // In dark mode, the solid card surface (#1e293b) against the darker
+            // overlay already looks layered, so we use bg-card directly.
+            // editorial-shadow provides the subtle ring+shadow lift on the panel edge.
+            'editorial-shadow fixed z-50 flex flex-col', 'bg-white/80 backdrop-blur-xl dark:bg-[#1e293bd9]', direction === 'bottom' && 'inset-x-0 bottom-0 mb-24 rounded-t-lg border-t', direction === 'top' && 'inset-x-0 top-0 mt-24 rounded-b-lg border-b', direction === 'right' && 'inset-y-0 right-0 h-full w-3/4 border-l', direction === 'left' && 'inset-y-0 left-0 h-full w-3/4 border-r', className), style: {
                 '--initial-transform': 'calc(100% + 8px)',
                 // Override vaul's user-select:none on [data-vaul-drawer] so text is selectable
                 userSelect: 'text',

package/dist/src/presentation/web/components/ui/tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../../../../src/presentation/web/components/ui/tooltip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAIvD,yEAAyE;AACzE,eAAO,MAAM,gBAAgB,MAAM,CAAC;AAEpC,iBAAS,eAAe,CAAC,EACvB,aAAgC,EAChC,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,QAAQ,CAAC,2CAQxD;AAED,iBAAS,OAAO,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,2CAEhF;AAED,iBAAS,cAAc,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC,2CAE1F;AAED,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,UAAc,EACd,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC,2CAiBvD;AAED,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,eAAe,EAAE,CAAC"}
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../../../../src/presentation/web/components/ui/tooltip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAIvD,yEAAyE;AACzE,eAAO,MAAM,gBAAgB,MAAM,CAAC;AAEpC,iBAAS,eAAe,CAAC,EACvB,aAAgC,EAChC,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,QAAQ,CAAC,2CAQxD;AAED,iBAAS,OAAO,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,2CAEhF;AAED,iBAAS,cAAc,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC,2CAE1F;AAED,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,UAAc,EACd,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC,2CAgBvD;AAED,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,eAAe,EAAE,CAAC"}

package/dist/src/presentation/web/components/ui/tooltip.js

@@ -1,5 +1,5 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Tooltip as TooltipPrimitive } from 'radix-ui';
 import { cn } from '../../lib/utils.js';
 /** Default tooltip hover delay (ms) for canvas nodes and UI controls. */
@@ -13,7 +13,7 @@ function Tooltip({ ...props }) {
 function TooltipTrigger({ ...props }) {
     return _jsx(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
 }
-function TooltipContent({ className, sideOffset = 0, children, ...props }) {
-    return (_jsx(TooltipPrimitive.Portal, { children: _jsxs(TooltipPrimitive.Content, { "data-slot": "tooltip-content", sideOffset: sideOffset, className: cn('bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance', className), ...props, children: [children, _jsx(TooltipPrimitive.Arrow, { className: "bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" })] }) }));
+function TooltipContent({ className, sideOffset = 4, children, ...props }) {
+    return (_jsx(TooltipPrimitive.Portal, { children: _jsx(TooltipPrimitive.Content, { "data-slot": "tooltip-content", sideOffset: sideOffset, className: cn('glass-blur editorial-shadow text-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-lg px-3 py-2 text-xs text-balance', className), ...props, children: children }) }));
 }
 export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/dist/src/presentation/web/hooks/feature-flags-context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"feature-flags-context.d.ts","sourceRoot":"","sources":["../../../../../src/presentation/web/hooks/feature-flags-context.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA6B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAClE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAc7D,UAAU,yBAAyB;IACjC,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,EAAE,iBAAiB,CAAC;CAC1B;AAED;;;;GAIG;AACH,wBAAgB,oBAAoB,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,yBAAyB,2CAElF;AAED;;;GAGG;AACH,wBAAgB,eAAe,IAAI,iBAAiB,CAEnD"}
+{"version":3,"file":"feature-flags-context.d.ts","sourceRoot":"","sources":["../../../../../src/presentation/web/hooks/feature-flags-context.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA6B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAClE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAe7D,UAAU,yBAAyB;IACjC,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,EAAE,iBAAiB,CAAC;CAC1B;AAED;;;;GAIG;AACH,wBAAgB,oBAAoB,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,yBAAyB,2CAElF;AAED;;;GAGG;AACH,wBAAgB,eAAe,IAAI,iBAAiB,CAEnD"}

package/dist/src/presentation/web/hooks/feature-flags-context.js

@@ -9,6 +9,7 @@ const defaultFlags = {
     adoptBranch: false,
     gitRebaseSync: false,
     reactFileManager: false,
+    plugins: false,
 };
 const FeatureFlagsContext = createContext(defaultFlags);
 /**

package/dist/src/presentation/web/lib/feature-flags.d.ts

@@ -13,6 +13,7 @@ export interface FeatureFlagsState {
     adoptBranch: boolean;
     gitRebaseSync: boolean;
     reactFileManager: boolean;
+    plugins: boolean;
 }
 export declare function getFeatureFlags(): Promise<FeatureFlagsState>;
 /**
@@ -27,5 +28,6 @@ export declare const featureFlags: {
     readonly adoptBranch: boolean;
     readonly gitRebaseSync: boolean;
     readonly reactFileManager: boolean;
+    readonly plugins: boolean;
 };
 //# sourceMappingURL=feature-flags.d.ts.map

package/dist/src/presentation/web/lib/feature-flags.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"feature-flags.d.ts","sourceRoot":"","sources":["../../../../../src/presentation/web/lib/feature-flags.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAsBH,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,OAAO,CAAC;IACf,YAAY,EAAE,OAAO,CAAC;IACtB,WAAW,EAAE,OAAO,CAAC;IACrB,aAAa,EAAE,OAAO,CAAC;IACvB,gBAAgB,EAAE,OAAO,CAAC;CAC3B;AAED,wBAAsB,eAAe,IAAI,OAAO,CAAC,iBAAiB,CAAC,CA6BlE;AAED;;;GAGG;AACH,eAAO,MAAM,YAAY;;;;;;;;CAsBf,CAAC"}
+{"version":3,"file":"feature-flags.d.ts","sourceRoot":"","sources":["../../../../../src/presentation/web/lib/feature-flags.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAuBH,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,OAAO,CAAC;IACf,YAAY,EAAE,OAAO,CAAC;IACtB,WAAW,EAAE,OAAO,CAAC;IACrB,aAAa,EAAE,OAAO,CAAC;IACvB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,wBAAsB,eAAe,IAAI,OAAO,CAAC,iBAAiB,CAAC,CA+BlE;AAED;;;GAGG;AACH,eAAO,MAAM,YAAY;;;;;;;;;CAyBf,CAAC"}

package/dist/src/presentation/web/lib/feature-flags.js

@@ -19,6 +19,7 @@ const ENV_FALLBACK_FLAGS = {
     adoptBranch: () => false,
     gitRebaseSync: () => false,
     reactFileManager: () => isEnabled(process.env.NEXT_PUBLIC_FLAG_REACT_FILE_MANAGER),
+    plugins: () => false,
 };
 export async function getFeatureFlags() {
     try {
@@ -34,6 +35,7 @@ export async function getFeatureFlags() {
                 adoptBranch: flags.adoptBranch,
                 gitRebaseSync: flags.gitRebaseSync,
                 reactFileManager: flags.reactFileManager,
+                plugins: flags.plugins,
             };
         }
     }
@@ -48,6 +50,7 @@ export async function getFeatureFlags() {
         adoptBranch: ENV_FALLBACK_FLAGS.adoptBranch(),
         gitRebaseSync: ENV_FALLBACK_FLAGS.gitRebaseSync(),
         reactFileManager: ENV_FALLBACK_FLAGS.reactFileManager(),
+        plugins: ENV_FALLBACK_FLAGS.plugins(),
     };
 }
 /**
@@ -76,4 +79,7 @@ export const featureFlags = {
     get reactFileManager() {
         return ENV_FALLBACK_FLAGS.reactFileManager();
     },
+    get plugins() {
+        return ENV_FALLBACK_FLAGS.plugins();
+    },
 };