@shepai/cli 1.167.0 → 1.168.0-pr509.b1dd877

package/dist/src/presentation/web/components/features/chat/useChatRuntime.d.ts

@@ -1,3 +1,17 @@
+/** Shape matching UserInteractionData from the agent executor interface. */
+export interface InteractionData {
+    toolCallId: string;
+    questions: {
+        question: string;
+        header: string;
+        options: {
+            label: string;
+            description: string;
+            preview?: string;
+        }[];
+        multiSelect: boolean;
+    }[];
+}
 interface SessionInfo {
     pid: number | null;
     sessionId: string | null;
@@ -45,6 +59,8 @@ export declare function useChatRuntime(featureId: string, worktreePath?: string,
     stopAgent: () => Promise<void>;
     sessionInfo: SessionInfo | null;
     isChatLoading: boolean;
+    pendingInteraction: InteractionData | null;
+    respondToInteraction: (answers: Record<string, string>) => Promise<void>;
 };
 export {};
 //# sourceMappingURL=useChatRuntime.d.ts.map

package/dist/src/presentation/web/components/features/chat/useChatRuntime.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useChatRuntime.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/chat/useChatRuntime.ts"],"names":[],"mappings":"AAkBA,UAAU,WAAW;IACnB,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,gBAAgB,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,iBAAiB,EAAE,MAAM,GAAG,IAAI,CAAC;CAClC;AAkDD,MAAM,WAAW,UAAU;IACzB,4EAA4E;IAC5E,SAAS,EAAE,OAAO,CAAC;IACnB,qFAAqF;IACrF,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3B;AAID,MAAM,WAAW,kBAAkB;IACjC,8EAA8E;IAC9E,gBAAgB,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,MAAM,CAAC;IAC/C,4EAA4E;IAC5E,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,kEAAkE;IAClE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iEAAiE;IACjE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6EAA6E;IAC7E,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,iEAAiE;AACjE,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,EAAE,IAAI,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAC5B,SAAS,EAAE,MAAM,EACjB,YAAY,CAAC,EAAE,MAAM,EACrB,OAAO,CAAC,EAAE,kBAAkB;;;;;;;EAgW7B"}
+{"version":3,"file":"useChatRuntime.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/chat/useChatRuntime.ts"],"names":[],"mappings":"AASA,4EAA4E;AAC5E,MAAM,WAAW,eAAe;IAC9B,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE;QACT,QAAQ,EAAE,MAAM,CAAC;QACjB,MAAM,EAAE,MAAM,CAAC;QACf,OAAO,EAAE;YAAE,KAAK,EAAE,MAAM,CAAC;YAAC,WAAW,EAAE,MAAM,CAAC;YAAC,OAAO,CAAC,EAAE,MAAM,CAAA;SAAE,EAAE,CAAC;QACpE,WAAW,EAAE,OAAO,CAAC;KACtB,EAAE,CAAC;CACL;AAYD,UAAU,WAAW;IACnB,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,gBAAgB,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,iBAAiB,EAAE,MAAM,GAAG,IAAI,CAAC;CAClC;AAkDD,MAAM,WAAW,UAAU;IACzB,4EAA4E;IAC5E,SAAS,EAAE,OAAO,CAAC;IACnB,qFAAqF;IACrF,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3B;AAID,MAAM,WAAW,kBAAkB;IACjC,8EAA8E;IAC9E,gBAAgB,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,MAAM,CAAC;IAC/C,4EAA4E;IAC5E,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,kEAAkE;IAClE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iEAAiE;IACjE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6EAA6E;IAC7E,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,iEAAiE;AACjE,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,EAAE,IAAI,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAC5B,SAAS,EAAE,MAAM,EACjB,YAAY,CAAC,EAAE,MAAM,EACrB,OAAO,CAAC,EAAE,kBAAkB;;;;;;;;oCAgXV,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;EAmDzC"}

package/dist/src/presentation/web/components/features/chat/useChatRuntime.js

@@ -100,6 +100,19 @@ export function useChatRuntime(featureId, worktreePath, options) {
     const [awaitingResponse, setAwaitingResponse] = useState(false);
     const awaitingTimerRef = useRef(null);
     const eventSourceRef = useRef(null);
+    // ── Interaction state (AskUserQuestion) ─────────────────────────────
+    const [pendingInteraction, setPendingInteraction] = useState(null);
+    // Sync pending interaction from backend polling (fallback for missed SSE)
+    useEffect(() => {
+        const backendInteraction = chatState?.pendingInteraction ?? null;
+        if (backendInteraction) {
+            setPendingInteraction(backendInteraction);
+        }
+        else if (!backendInteraction && pendingInteraction) {
+            // Backend cleared it (e.g. agent continued) — clear local state
+            setPendingInteraction(null);
+        }
+    }, [chatState?.pendingInteraction, pendingInteraction]);
     // Delayed awaiting — only show Thinking bubble after 600ms to avoid flash
     const startAwaiting = useCallback(() => {
         if (awaitingTimerRef.current)
@@ -163,10 +176,24 @@ export function useChatRuntime(featureId, worktreePath, options) {
                 // Ignore
             }
         });
+        es.addEventListener('interaction', (event) => {
+            try {
+                const data = JSON.parse(event.data);
+                if (data.interaction) {
+                    cancelAwaiting();
+                    setPendingInteraction(data.interaction);
+                }
+            }
+            catch {
+                // Ignore
+            }
+        });
         es.addEventListener('done', () => {
             setStatusLog(null);
             cancelAwaiting();
             pushDebug('turn_done');
+            // Agent turn completed — clear any lingering interaction state
+            setPendingInteraction(null);
             // Refetch first, THEN clear local streaming state so there's no gap
             void queryClient.invalidateQueries({ queryKey: chatQueryKey(featureId) }).then(() => {
                 setStreamingText('');
@@ -335,6 +362,7 @@ export function useChatRuntime(featureId, worktreePath, options) {
         setDebugEvents([]);
         setStatusLog(null);
         cancelAwaiting();
+        setPendingInteraction(null);
         void queryClient.invalidateQueries({ queryKey: chatQueryKey(featureId) });
     }, [featureId, queryClient, cancelAwaiting]);
     // ── Stop agent ────────────────────────────────────────────────────────
@@ -347,6 +375,30 @@ export function useChatRuntime(featureId, worktreePath, options) {
         cancelAwaiting();
         void queryClient.invalidateQueries({ queryKey: chatQueryKey(featureId) });
     }, [featureId, queryClient, cancelAwaiting]);
+    // ── Respond to interaction (AskUserQuestion) ───────────────────────────
+    const respondToInteraction = useCallback(async (answers) => {
+        // Clear the bubble and status log immediately — answers are persisted as
+        // a user message by the backend, shown in conversation history on refetch.
+        setPendingInteraction(null);
+        setStatusLog(null);
+        try {
+            const res = await fetch(`/api/interactive/chat/${featureId}/respond`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ answers }),
+            });
+            if (!res.ok) {
+                // eslint-disable-next-line no-console
+                console.error(`[respondToInteraction] failed: ${res.status}`);
+            }
+        }
+        catch (err) {
+            // eslint-disable-next-line no-console
+            console.error('[respondToInteraction] error:', err);
+        }
+        // Refetch to show the persisted user message with answers
+        void queryClient.invalidateQueries({ queryKey: chatQueryKey(featureId) });
+    }, [featureId, queryClient]);
     // ── Build assistant-ui runtime ──────────────────────────────────────────
     const runtime = useExternalStoreRuntime({
         messages: threadMessages,
@@ -359,5 +411,14 @@ export function useChatRuntime(featureId, worktreePath, options) {
             cancelAwaiting();
         }, [cancelAwaiting]),
     });
-    return { runtime, status, clearChat, stopAgent, sessionInfo, isChatLoading };
+    return {
+        runtime,
+        status,
+        clearChat,
+        stopAgent,
+        sessionInfo,
+        isChatLoading,
+        pendingInteraction,
+        respondToInteraction,
+    };
 }

package/dist/src/presentation/web/components/features/control-center/control-center-inner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"control-center-inner.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/control-center/control-center-inner.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,IAAI,EAAY,MAAM,eAAe,CAAC;AAIpD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAgC5E,UAAU,uBAAuB;IAC/B,YAAY,EAAE,cAAc,EAAE,CAAC;IAC/B,YAAY,EAAE,IAAI,EAAE,CAAC;CACtB;AAED,wBAAgB,kBAAkB,CAAC,EAAE,YAAY,EAAE,YAAY,EAAE,EAAE,uBAAuB,2CA+czF"}
+{"version":3,"file":"control-center-inner.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/control-center/control-center-inner.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,IAAI,EAAY,MAAM,eAAe,CAAC;AAIpD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAgC5E,UAAU,uBAAuB;IAC/B,YAAY,EAAE,cAAc,EAAE,CAAC;IAC/B,YAAY,EAAE,IAAI,EAAE,CAAC;CACtB;AAED,wBAAgB,kBAAkB,CAAC,EAAE,YAAY,EAAE,YAAY,EAAE,EAAE,uBAAuB,2CAiezF"}

package/dist/src/presentation/web/components/features/control-center/control-center-inner.js

@@ -143,13 +143,28 @@ export function ControlCenterInner({ initialNodes, initialEdges }) {
             }, AUTO_FOCUS_DRAWER_DELAY_MS);
         }, 0);
     }, [fitView, guardedNavigate, router]);
-    // Wrapper: add repo + auto-focus if canvas was empty
+    // Smoothly pan/zoom to a specific node after it appears on canvas
+    const focusOnNode = useCallback((nodeId) => {
+        // Wait for next render so the node exists in the DOM
+        setTimeout(() => {
+            fitView({
+                nodes: [{ id: nodeId }],
+                maxZoom: 1.0,
+                padding: 0.4,
+                duration: 600,
+            });
+        }, 0);
+    }, [fitView]);
+    // Wrapper: add repo + auto-focus on the new node
     const addRepoAndFocus = useCallback((path) => {
-        const { wasEmpty, repoPath } = handleAddRepository(path);
+        const { wasEmpty, repoPath, tempNodeId } = handleAddRepository(path);
         if (wasEmpty) {
             focusAndOpenDrawer(repoPath);
         }
-    }, [handleAddRepository, focusAndOpenDrawer]);
+        else {
+            focusOnNode(tempNodeId);
+        }
+    }, [handleAddRepository, focusAndOpenDrawer, focusOnNode]);
     // Listen for global "add repository" events from the top bar button
     useEffect(() => {
         const handler = (e) => {

package/dist/src/presentation/web/components/features/control-center/use-control-center-state.d.ts

@@ -12,6 +12,7 @@ export interface ControlCenterState {
     handleAddRepository: (path: string) => {
         wasEmpty: boolean;
         repoPath: string;
+        tempNodeId: string;
     };
     handleLayout: (direction: LayoutDirection) => void;
     handleArchiveFeature: (featureId: string) => void;

package/dist/src/presentation/web/components/features/control-center/use-control-center-state.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-control-center-state.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/control-center/use-control-center-state.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAClE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AACxE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AAC9E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAC5E,OAAO,EAGL,KAAK,eAAe,EACrB,MAAM,yBAAyB,CAAC;AAkBjC,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAM7E,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,aAAa,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,cAAc,CAAC,EAAE,KAAK,IAAI,CAAC;IAC/D,aAAa,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,IAAI,CAAC;IAChD,mBAAmB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK;QAAE,QAAQ,EAAE,OAAO,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAC;IAC/E,YAAY,EAAE,CAAC,SAAS,EAAE,eAAe,KAAK,IAAI,CAAC;IACnD,oBAAoB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,mBAAmB,EAAE,CACnB,SAAS,EAAE,MAAM,EACjB,OAAO,CAAC,EAAE,OAAO,EACjB,aAAa,CAAC,EAAE,OAAO,EACvB,OAAO,CAAC,EAAE,OAAO,KACd,IAAI,CAAC;IACV,kBAAkB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,kBAAkB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,iBAAiB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,sBAAsB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACpD,sBAAsB,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAChE,iBAAiB,EAAE,CACjB,YAAY,EAAE,MAAM,GAAG,IAAI,EAC3B,YAAY,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,EACvC,QAAQ,CAAC,EAAE,MAAM,KACd,MAAM,CAAC;IACZ,yDAAyD;IACzD,YAAY,EAAE,OAAO,CAAC;IACtB,0CAA0C;IAC1C,eAAe,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,wDAAwD;IACxD,wBAAwB,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAC;IACxE,gDAAgD;IAChD,iBAAiB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,kBAAkB,GAAG,SAAS,CAAC;IACtE,0EAA0E;IAC1E,YAAY,EAAE,CAAC,SAAS,EAAE,cAAc,KAAK,IAAI,CAAC;CACnD;AAQD,wBAAgB,qBAAqB,CACnC,YAAY,EAAE,cAAc,EAAE,EAC9B,YAAY,EAAE,IAAI,EAAE,GACnB,kBAAkB,CAilBpB"}
+{"version":3,"file":"use-control-center-state.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/control-center/use-control-center-state.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAClE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AACxE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AAC9E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAC5E,OAAO,EAGL,KAAK,eAAe,EACrB,MAAM,yBAAyB,CAAC;AAkBjC,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAM7E,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,aAAa,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,cAAc,CAAC,EAAE,KAAK,IAAI,CAAC;IAC/D,aAAa,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,IAAI,CAAC;IAChD,mBAAmB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK;QACrC,QAAQ,EAAE,OAAO,CAAC;QAClB,QAAQ,EAAE,MAAM,CAAC;QACjB,UAAU,EAAE,MAAM,CAAC;KACpB,CAAC;IACF,YAAY,EAAE,CAAC,SAAS,EAAE,eAAe,KAAK,IAAI,CAAC;IACnD,oBAAoB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,mBAAmB,EAAE,CACnB,SAAS,EAAE,MAAM,EACjB,OAAO,CAAC,EAAE,OAAO,EACjB,aAAa,CAAC,EAAE,OAAO,EACvB,OAAO,CAAC,EAAE,OAAO,KACd,IAAI,CAAC;IACV,kBAAkB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,kBAAkB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,iBAAiB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,sBAAsB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACpD,sBAAsB,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAChE,iBAAiB,EAAE,CACjB,YAAY,EAAE,MAAM,GAAG,IAAI,EAC3B,YAAY,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,EACvC,QAAQ,CAAC,EAAE,MAAM,KACd,MAAM,CAAC;IACZ,yDAAyD;IACzD,YAAY,EAAE,OAAO,CAAC;IACtB,0CAA0C;IAC1C,eAAe,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,wDAAwD;IACxD,wBAAwB,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAC;IACxE,gDAAgD;IAChD,iBAAiB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,kBAAkB,GAAG,SAAS,CAAC;IACtE,0EAA0E;IAC1E,YAAY,EAAE,CAAC,SAAS,EAAE,cAAc,KAAK,IAAI,CAAC;CACnD;AAQD,wBAAgB,qBAAqB,CACnC,YAAY,EAAE,cAAc,EAAE,EAC9B,YAAY,EAAE,IAAI,EAAE,GACnB,kBAAkB,CAilBpB"}

package/dist/src/presentation/web/components/features/control-center/use-control-center-state.js

@@ -486,7 +486,7 @@ export function useControlCenterState(initialNodes, initialEdges) {
             toast.error('Failed to add repository');
         })
             .finally(() => endMutation());
-        return { wasEmpty, repoPath: path };
+        return { wasEmpty, repoPath: path, tempNodeId: tempId };
     }, [
         addRepositoryToMap,
         removeRepository,

package/dist/src/presentation/web/components/features/skills/add-skill-dialog.d.ts

@@ -0,0 +1,10 @@
+import type { SkillData } from '../../../lib/skills.js';
+export interface AddSkillDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    onAdded: () => void;
+    discoveredSkills: SkillData[];
+    existingSkillNames: string[];
+}
+export declare function AddSkillDialog({ open, onOpenChange, onAdded, discoveredSkills, existingSkillNames, }: AddSkillDialogProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=add-skill-dialog.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"add-skill-dialog.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/skills/add-skill-dialog.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,gBAAgB,EAAE,SAAS,EAAE,CAAC;IAC9B,kBAAkB,EAAE,MAAM,EAAE,CAAC;CAC9B;AAED,wBAAgB,cAAc,CAAC,EAC7B,IAAI,EACJ,YAAY,EACZ,OAAO,EACP,gBAAgB,EAChB,kBAAkB,GACnB,EAAE,mBAAmB,2CAuIrB"}

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

@@ -0,0 +1,56 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { toast } from 'sonner';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, } from '../../ui/dialog.js';
+import { Button } from '../../ui/button.js';
+import { Input } from '../../ui/input.js';
+import { Label } from '../../ui/label.js';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '../../ui/tabs.js';
+import { addInjectedSkill } from '../../../app/actions/add-injected-skill.js';
+export function AddSkillDialog({ open, onOpenChange, onAdded, discoveredSkills, existingSkillNames, }) {
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    const [remoteName, setRemoteName] = useState('');
+    const [remoteSource, setRemoteSource] = useState('');
+    const [remoteSkillName, setRemoteSkillName] = useState('');
+    const availableSkills = discoveredSkills.filter((s) => !existingSkillNames.includes(s.name));
+    const handleAddLocal = async (skill) => {
+        setIsSubmitting(true);
+        const result = await addInjectedSkill({
+            name: skill.name,
+            type: 'local',
+            source: `.claude/skills/${skill.name}`,
+        });
+        setIsSubmitting(false);
+        if (!result.success) {
+            toast.error(result.error ?? 'Failed to add skill');
+            return;
+        }
+        toast.success(`Added "${skill.name}" to feature skills`);
+        onAdded();
+    };
+    const handleAddRemote = async () => {
+        if (!remoteName.trim() || !remoteSource.trim()) {
+            toast.error('Name and source are required');
+            return;
+        }
+        setIsSubmitting(true);
+        const result = await addInjectedSkill({
+            name: remoteName.trim(),
+            type: 'remote',
+            source: remoteSource.trim(),
+            ...(remoteSkillName.trim() && { remoteSkillName: remoteSkillName.trim() }),
+        });
+        setIsSubmitting(false);
+        if (!result.success) {
+            toast.error(result.error ?? 'Failed to add skill');
+            return;
+        }
+        toast.success(`Added "${remoteName.trim()}" to feature skills`);
+        setRemoteName('');
+        setRemoteSource('');
+        setRemoteSkillName('');
+        onAdded();
+    };
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: "sm:max-w-md", "data-testid": "add-skill-dialog", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: "Add Skill to Features" }) }), _jsxs(Tabs, { defaultValue: "local", children: [_jsxs(TabsList, { className: "w-full", children: [_jsx(TabsTrigger, { value: "local", className: "flex-1", children: "Local" }), _jsx(TabsTrigger, { value: "remote", className: "flex-1", children: "Remote" })] }), _jsx(TabsContent, { value: "local", className: "mt-4", children: availableSkills.length === 0 ? (_jsx("p", { className: "text-muted-foreground text-sm", children: "All discovered skills are already configured." })) : (_jsx("div", { className: "flex max-h-60 flex-col gap-2 overflow-y-auto", children: availableSkills.map((skill) => (_jsxs("button", { type: "button", className: "hover:bg-accent flex flex-col gap-0.5 rounded-md border p-3 text-left transition-colors", onClick: () => handleAddLocal(skill), disabled: isSubmitting, "data-testid": `add-local-skill-${skill.name}`, children: [_jsx("span", { className: "text-sm font-medium", children: skill.displayName }), _jsx("span", { className: "text-muted-foreground line-clamp-1 text-xs", children: skill.description })] }, skill.name))) })) }), _jsx(TabsContent, { value: "remote", className: "mt-4", children: _jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "remote-name", children: "Name" }), _jsx(Input, { id: "remote-name", placeholder: "e.g. remotion-best-practices", value: remoteName, onChange: (e) => setRemoteName(e.target.value), "data-testid": "remote-skill-name" })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "remote-source", children: "Source (npm package or URL)" }), _jsx(Input, { id: "remote-source", placeholder: "e.g. @anthropic/remotion-skills", value: remoteSource, onChange: (e) => setRemoteSource(e.target.value), "data-testid": "remote-skill-source" })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "remote-skill-name", children: "Skill Name (optional)" }), _jsx(Input, { id: "remote-skill-name", placeholder: "e.g. remotion-best-practices", value: remoteSkillName, onChange: (e) => setRemoteSkillName(e.target.value), "data-testid": "remote-skill-skill-name" })] }), _jsx(DialogFooter, { children: _jsx(Button, { onClick: handleAddRemote, disabled: isSubmitting || !remoteName.trim() || !remoteSource.trim(), "data-testid": "add-remote-skill-submit", children: "Add Remote Skill" }) })] }) })] })] }) }));
+}

package/dist/src/presentation/web/components/features/skills/add-skill-dialog.stories.d.ts

@@ -0,0 +1,16 @@
+import type { StoryObj } from '@storybook/react';
+import { AddSkillDialog } from './add-skill-dialog.js';
+declare const meta: {
+    title: string;
+    component: typeof AddSkillDialog;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const SomeAlreadyConfigured: Story;
+export declare const AllConfigured: Story;
+//# sourceMappingURL=add-skill-dialog.stories.d.ts.map

package/dist/src/presentation/web/components/features/skills/add-skill-dialog.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"add-skill-dialog.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/skills/add-skill-dialog.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAGpD,QAAA,MAAM,IAAI;;;;;;;CAO6B,CAAC;AAExC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAgCnC,eAAO,MAAM,OAAO,EAAE,KAQrB,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,KAQnC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAQ3B,CAAC"}

package/dist/src/presentation/web/components/features/skills/add-skill-dialog.stories.js

@@ -0,0 +1,66 @@
+import { AddSkillDialog } from './add-skill-dialog.js';
+const meta = {
+    title: 'Features/Skills/AddSkillDialog',
+    component: AddSkillDialog,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+};
+export default meta;
+const sampleDiscoveredSkills = [
+    {
+        name: 'architecture-reviewer',
+        displayName: 'architecture-reviewer',
+        description: 'Review architecture decisions against Clean Architecture principles',
+        category: 'Analysis',
+        source: 'project',
+        body: '',
+        resources: [],
+    },
+    {
+        name: 'cross-validate-artifacts',
+        displayName: 'cross-validate-artifacts',
+        description: 'Cross-validate documentation and artifacts across the codebase',
+        category: 'Analysis',
+        source: 'project',
+        body: '',
+        resources: [],
+    },
+    {
+        name: 'tsp-model',
+        displayName: 'tsp-model',
+        description: 'Create and modify TypeSpec domain models',
+        category: 'Code Generation',
+        source: 'project',
+        body: '',
+        resources: [],
+    },
+];
+export const Default = {
+    args: {
+        open: true,
+        onOpenChange: () => undefined,
+        onAdded: () => undefined,
+        discoveredSkills: sampleDiscoveredSkills,
+        existingSkillNames: [],
+    },
+};
+export const SomeAlreadyConfigured = {
+    args: {
+        open: true,
+        onOpenChange: () => undefined,
+        onAdded: () => undefined,
+        discoveredSkills: sampleDiscoveredSkills,
+        existingSkillNames: ['architecture-reviewer'],
+    },
+};
+export const AllConfigured = {
+    args: {
+        open: true,
+        onOpenChange: () => undefined,
+        onAdded: () => undefined,
+        discoveredSkills: sampleDiscoveredSkills,
+        existingSkillNames: ['architecture-reviewer', 'cross-validate-artifacts', 'tsp-model'],
+    },
+};

package/dist/src/presentation/web/components/features/skills/auto-injected-skills-section.d.ts

@@ -0,0 +1,8 @@
+import type { SkillInjectionConfig } from '../../../../../../packages/core/src/domain/generated/output.js';
+import type { SkillData } from '../../../lib/skills.js';
+export interface AutoInjectedSkillsSectionProps {
+    config: SkillInjectionConfig;
+    discoveredSkills: SkillData[];
+}
+export declare function AutoInjectedSkillsSection({ config, discoveredSkills, }: AutoInjectedSkillsSectionProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=auto-injected-skills-section.d.ts.map

package/dist/src/presentation/web/components/features/skills/auto-injected-skills-section.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"auto-injected-skills-section.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/skills/auto-injected-skills-section.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,oBAAoB,EAAe,MAAM,sCAAsC,CAAC;AAM9F,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,MAAM,WAAW,8BAA8B;IAC7C,MAAM,EAAE,oBAAoB,CAAC;IAC7B,gBAAgB,EAAE,SAAS,EAAE,CAAC;CAC/B;AAED,wBAAgB,yBAAyB,CAAC,EACxC,MAAM,EACN,gBAAgB,GACjB,EAAE,8BAA8B,2CA2EhC"}

package/dist/src/presentation/web/components/features/skills/auto-injected-skills-section.js

@@ -0,0 +1,42 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { Plus, X } from 'lucide-react';
+import { toast } from 'sonner';
+import { Badge } from '../../ui/badge.js';
+import { Button } from '../../ui/button.js';
+import { Card, CardContent, CardHeader, CardTitle } from '../../ui/card.js';
+import { removeInjectedSkill } from '../../../app/actions/remove-injected-skill.js';
+import { AddSkillDialog } from './add-skill-dialog.js';
+export function AutoInjectedSkillsSection({ config, discoveredSkills, }) {
+    const router = useRouter();
+    const [addDialogOpen, setAddDialogOpen] = useState(false);
+    const [removingSkill, setRemovingSkill] = useState(null);
+    const skillDescriptions = useMemo(() => {
+        const map = new Map();
+        for (const s of discoveredSkills) {
+            map.set(s.name, s.description);
+        }
+        return map;
+    }, [discoveredSkills]);
+    const handleRemove = async (skillName) => {
+        setRemovingSkill(skillName);
+        const result = await removeInjectedSkill(skillName);
+        setRemovingSkill(null);
+        if (!result.success) {
+            toast.error(result.error ?? 'Failed to remove skill');
+            return;
+        }
+        toast.success(`Removed "${skillName}" from feature skills`);
+        router.refresh();
+    };
+    const handleAdded = () => {
+        setAddDialogOpen(false);
+        router.refresh();
+    };
+    return (_jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { children: [_jsx("h2", { className: "text-base font-semibold", children: "Feature Skills" }), _jsx("p", { className: "text-muted-foreground text-sm", children: "Curated skills included in new feature worktrees to guide the agent" })] }), config.skills.length > 0 ? (_jsx("div", { className: "grid gap-2 sm:grid-cols-2 lg:grid-cols-3", children: config.skills.map((skill) => (_jsx(InjectedSkillCard, { skill: skill, description: skillDescriptions.get(skill.name), onRemove: () => handleRemove(skill.name), isRemoving: removingSkill === skill.name }, skill.name))) })) : (_jsx("p", { className: "text-muted-foreground text-sm", children: "No skills configured. Add skills to guide the agent when working on new features." })), _jsx("div", { children: _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setAddDialogOpen(true), "data-testid": "add-injected-skill-button", children: [_jsx(Plus, { className: "mr-1.5 size-4" }), "Add Skill"] }) }), _jsx(AddSkillDialog, { open: addDialogOpen, onOpenChange: setAddDialogOpen, onAdded: handleAdded, discoveredSkills: discoveredSkills, existingSkillNames: config.skills.map((s) => s.name) })] }));
+}
+function InjectedSkillCard({ skill, description, onRemove, isRemoving, }) {
+    return (_jsxs(Card, { "data-testid": `injected-skill-${skill.name}`, children: [_jsxs(CardHeader, { className: "flex flex-row items-start justify-between gap-2 pb-2", children: [_jsx("div", { className: "min-w-0", children: _jsx(CardTitle, { className: "truncate text-sm", children: skill.name }) }), _jsx(Button, { variant: "ghost", size: "icon-sm", className: "shrink-0", onClick: onRemove, disabled: isRemoving, "aria-label": `Remove ${skill.name}`, "data-testid": `remove-injected-skill-${skill.name}`, children: _jsx(X, { className: "size-4" }) })] }), _jsxs(CardContent, { className: "space-y-2 pt-0", children: [description ? (_jsx("p", { className: "text-muted-foreground line-clamp-2 text-xs", children: description })) : null, _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(Badge, { variant: skill.type === 'local' ? 'secondary' : 'outline', className: "text-xs", children: skill.type === 'local' ? 'Local' : 'Remote' }), _jsx("span", { className: "text-muted-foreground max-w-37.5 truncate text-xs", children: skill.source })] })] })] }));
+}

package/dist/src/presentation/web/components/features/skills/auto-injected-skills-section.stories.d.ts

@@ -0,0 +1,16 @@
+import type { StoryObj } from '@storybook/react';
+import { AutoInjectedSkillsSection } from './auto-injected-skills-section.js';
+declare const meta: {
+    title: string;
+    component: typeof AutoInjectedSkillsSection;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const SingleSkill: Story;
+export declare const EmptySkills: Story;
+//# sourceMappingURL=auto-injected-skills-section.stories.d.ts.map

package/dist/src/presentation/web/components/features/skills/auto-injected-skills-section.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"auto-injected-skills-section.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/skills/auto-injected-skills-section.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,yBAAyB,EAAE,MAAM,gCAAgC,CAAC;AAG3E,QAAA,MAAM,IAAI;;;;;;;CAOwC,CAAC;AAEnD,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAyCnC,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAQzB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAKzB,CAAC"}

package/dist/src/presentation/web/components/features/skills/auto-injected-skills-section.stories.js

@@ -0,0 +1,69 @@
+import { SkillSourceType } from '../../../../../../packages/core/src/domain/generated/output.js';
+import { AutoInjectedSkillsSection } from './auto-injected-skills-section.js';
+const meta = {
+    title: 'Features/Skills/AutoInjectedSkillsSection',
+    component: AutoInjectedSkillsSection,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'padded',
+    },
+};
+export default meta;
+const sampleConfig = {
+    enabled: true,
+    skills: [
+        {
+            name: 'architecture-reviewer',
+            type: SkillSourceType.Local,
+            source: '.claude/skills/architecture-reviewer',
+        },
+        { name: 'tsp-model', type: SkillSourceType.Local, source: '.claude/skills/tsp-model' },
+        {
+            name: 'remotion-best-practices',
+            type: SkillSourceType.Remote,
+            source: '@anthropic/remotion-skills',
+            remoteSkillName: 'remotion-best-practices',
+        },
+    ],
+};
+const sampleDiscoveredSkills = [
+    {
+        name: 'architecture-reviewer',
+        displayName: 'architecture-reviewer',
+        description: 'Review architecture decisions against Clean Architecture principles',
+        category: 'Analysis',
+        source: 'project',
+        body: '',
+        resources: [],
+    },
+    {
+        name: 'cross-validate-artifacts',
+        displayName: 'cross-validate-artifacts',
+        description: 'Cross-validate documentation and artifacts across the codebase',
+        category: 'Analysis',
+        source: 'project',
+        body: '',
+        resources: [],
+    },
+];
+export const Default = {
+    args: {
+        config: sampleConfig,
+        discoveredSkills: sampleDiscoveredSkills,
+    },
+};
+export const SingleSkill = {
+    args: {
+        config: {
+            enabled: true,
+            skills: [sampleConfig.skills[0]],
+        },
+        discoveredSkills: sampleDiscoveredSkills,
+    },
+};
+export const EmptySkills = {
+    args: {
+        config: { enabled: true, skills: [] },
+        discoveredSkills: sampleDiscoveredSkills,
+    },
+};

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

@@ -1,6 +1,8 @@
+import type { SkillInjectionConfig } from '../../../../../../packages/core/src/domain/generated/output.js';
 import type { SkillData } from '../../../lib/skills.js';
 export interface SkillsPageClientProps {
     skills: SkillData[];
+    injectionConfig: SkillInjectionConfig;
 }
-export declare function SkillsPageClient({ skills }: SkillsPageClientProps): import("react/jsx-runtime").JSX.Element;
+export declare function SkillsPageClient({ skills, injectionConfig }: SkillsPageClientProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=skills-page-client.d.ts.map

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,EAAE,oBAAoB,EAAE,MAAM,sCAAsC,CAAC;AAGjF,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,cAAc,CAAC;AAE7D,MAAM,WAAW,qBAAqB;IACpC,MAAM,EAAE,SAAS,EAAE,CAAC;IACpB,eAAe,EAAE,oBAAoB,CAAC;CACvC;AAeD,wBAAgB,gBAAgB,CAAC,EAAE,MAAM,EAAE,eAAe,EAAE,EAAE,qBAAqB,2CAuFlF"}

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

@@ -9,6 +9,8 @@ import { EmptyState } from '../../common/empty-state/index.js';
 import { SkillList } from './skill-list.js';
 import { CategoryFilter } from './category-filter.js';
 import { SkillDetailDrawer } from './skill-detail-drawer.js';
+import { Separator } from '../../ui/separator.js';
+import { AutoInjectedSkillsSection } from './auto-injected-skills-section.js';
 function computeCategoryCounts(skills) {
     const counts = {
         Workflow: 0,
@@ -21,7 +23,7 @@ function computeCategoryCounts(skills) {
     }
     return counts;
 }
-export function SkillsPageClient({ skills }) {
+export function SkillsPageClient({ skills, injectionConfig }) {
     const [searchQuery, setSearchQuery] = useState('');
     const [activeCategory, setActiveCategory] = useState(null);
     const [selectedSkill, setSelectedSkill] = useState(null);
@@ -46,7 +48,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-6 p-6", children: [_jsx(PageHeader, { title: "Skills", description: "Claude Code skills available to this project" }), _jsx(AutoInjectedSkillsSection, { config: injectionConfig, discoveredSkills: skills }), _jsx(Separator, {}), _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-6 p-6", children: [_jsx(PageHeader, { title: "Skills", description: "Claude Code skills available to this project" }), _jsx(AutoInjectedSkillsSection, { config: injectionConfig, discoveredSkills: skills }), _jsx(Separator, {}), _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/skills/skills-page-client.stories.d.ts

@@ -13,4 +13,5 @@ type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
 export declare const Empty: Story;
 export declare const ManySkills: Story;
+export declare const WithInjectedSkills: Story;
 //# sourceMappingURL=skills-page-client.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"skills-page-client.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/skills/skills-page-client.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAGxD,QAAA,MAAM,IAAI;;;;;;;CAO+B,CAAC;AAE1C,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAwKnC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAInB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAIxB,CAAC"}
+{"version":3,"file":"skills-page-client.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/skills/skills-page-client.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAKxD,QAAA,MAAM,IAAI;;;;;;;CAO+B,CAAC;AAE1C,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAwKnC,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAKxB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAqBhC,CAAC"}

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

@@ -1,4 +1,6 @@
+import { SkillSourceType } from '../../../../../../packages/core/src/domain/generated/output.js';
 import { SkillsPageClient } from './skills-page-client.js';
+const emptyInjectionConfig = { enabled: false, skills: [] };
 const meta = {
     title: 'Features/SkillsPageClient',
     component: SkillsPageClient,
@@ -172,15 +174,40 @@ const manySkills = [
 export const Default = {
     args: {
         skills: sampleSkills,
+        injectionConfig: emptyInjectionConfig,
     },
 };
 export const Empty = {
     args: {
         skills: [],
+        injectionConfig: emptyInjectionConfig,
     },
 };
 export const ManySkills = {
     args: {
         skills: manySkills,
+        injectionConfig: emptyInjectionConfig,
+    },
+};
+export const WithInjectedSkills = {
+    args: {
+        skills: sampleSkills,
+        injectionConfig: {
+            enabled: true,
+            skills: [
+                {
+                    name: 'architecture-reviewer',
+                    type: SkillSourceType.Local,
+                    source: '.claude/skills/architecture-reviewer',
+                },
+                { name: 'tsp-model', type: SkillSourceType.Local, source: '.claude/skills/tsp-model' },
+                {
+                    name: 'remotion-best-practices',
+                    type: SkillSourceType.Remote,
+                    source: '@anthropic/remotion-skills',
+                    remoteSkillName: 'remotion-best-practices',
+                },
+            ],
+        },
     },
 };