@hanzo/ui 8.27.12 → 8.27.14

package/dist/agents/LiveVoiceCall.cjs

@@ -3,60 +3,76 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.LiveVoiceCall = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const LiveVoiceCall = ({ active, muted, title = 'Duplex Voice Session', statusText = 'Connected · 24kHz Opus', transcripts = [], onToggleMute, onEndCall, className = '', }) => {
+const LiveVoiceCall = ({ title = 'AI Voice Call', status = 'connected', onEndCall, onToggleMute, isMuted = false, transcripts = [], className = '', style, }) => {
     const canvasRef = (0, react_1.useRef)(null);
-    const animFrameRef = (0, react_1.useRef)(null);
+    const [muted, setMuted] = (0, react_1.useState)(isMuted);
+    // Animated visualizer
     (0, react_1.useEffect)(() => {
-        if (!active)
-            return;
         const canvas = canvasRef.current;
         if (!canvas)
             return;
         const ctx = canvas.getContext('2d');
         if (!ctx)
             return;
+        let animationFrameId;
         let phase = 0;
         const render = () => {
             ctx.clearRect(0, 0, canvas.width, canvas.height);
-            const width = canvas.width;
-            const height = canvas.height;
-            const centerY = height / 2;
-            const bars = 36;
-            const barWidth = width / bars - 2;
-            for (let i = 0; i < bars; i++) {
-                const amplitude = muted
-                    ? 4
-                    : Math.sin(phase + i * 0.3) * 18 + Math.cos(phase * 1.5 + i * 0.2) * 12 + 22;
-                const barHeight = Math.max(4, Math.abs(amplitude));
-                const gradient = ctx.createLinearGradient(0, centerY - barHeight, 0, centerY + barHeight);
-                if (muted) {
-                    gradient.addColorStop(0, '#71717a');
-                    gradient.addColorStop(1, '#3f3f46');
-                }
-                else {
-                    gradient.addColorStop(0, '#818cf8');
-                    gradient.addColorStop(0.5, '#c084fc');
-                    gradient.addColorStop(1, '#38bdf8');
-                }
-                ctx.fillStyle = gradient;
+            const centerY = canvas.height / 2;
+            const numBars = 32;
+            const barWidth = 4;
+            const spacing = (canvas.width - numBars * barWidth) / (numBars - 1);
+            for (let i = 0; i < numBars; i++) {
+                const x = i * (barWidth + spacing);
+                const height = status === 'speaking' || status === 'listening'
+                    ? Math.sin(phase + i * 0.25) * 20 + 24
+                    : 6;
+                ctx.fillStyle =
+                    status === 'speaking'
+                        ? '#34d399'
+                        : status === 'listening'
+                            ? '#818cf8'
+                            : '#737373';
                 ctx.beginPath();
-                ctx.roundRect(i * (barWidth + 2), centerY - barHeight / 2, barWidth, barHeight, 4);
+                ctx.roundRect(x, centerY - height / 2, barWidth, height, 2);
                 ctx.fill();
             }
-            phase += muted ? 0.02 : 0.08;
-            animFrameRef.current = requestAnimationFrame(render);
+            phase += 0.08;
+            animationFrameId = requestAnimationFrame(render);
         };
         render();
-        return () => {
-            if (animFrameRef.current) {
-                cancelAnimationFrame(animFrameRef.current);
-            }
-        };
-    }, [active, muted]);
-    if (!active)
-        return null;
-    return ((0, jsx_runtime_1.jsxs)("div", { className: `flex flex-col gap-4 p-5 bg-neutral-900/80 backdrop-blur-xl border border-white/15 rounded-2xl shadow-2xl ${className}`, role: "dialog", "aria-label": "Live Voice Call", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "w-2.5 h-2.5 rounded-full bg-emerald-400 animate-pulse" }), (0, jsx_runtime_1.jsx)("h3", { className: "text-sm font-semibold text-white", children: title })] }), (0, jsx_runtime_1.jsx)("span", { className: "text-xs text-neutral-400 font-mono", children: statusText })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-center p-4 bg-neutral-950/60 rounded-xl border border-white/5", children: (0, jsx_runtime_1.jsx)("canvas", { ref: canvasRef, width: 380, height: 70, className: "w-full h-[70px]" }) }), transcripts.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-col gap-2 max-h-40 overflow-y-auto pr-1", children: transcripts.map((t, idx) => ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-0.5 text-xs", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between text-[11px] text-neutral-500", children: [(0, jsx_runtime_1.jsx)("span", { className: "font-semibold text-neutral-300", children: t.speaker }), (0, jsx_runtime_1.jsx)("span", { children: t.time })] }), (0, jsx_runtime_1.jsx)("p", { className: "text-neutral-200 bg-white/5 p-2 rounded-lg", children: t.text })] }, idx))) })), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-center gap-3 pt-2", children: [(0, jsx_runtime_1.jsx)("button", { onClick: onToggleMute, className: `flex items-center gap-2 px-4 py-2 rounded-xl text-xs font-semibold transition-all border ${muted
-                            ? 'bg-rose-500/20 text-rose-300 border-rose-500/40 hover:bg-rose-500/30'
-                            : 'bg-white/10 text-white border-white/20 hover:bg-white/15'}`, children: (0, jsx_runtime_1.jsx)("span", { children: muted ? '🔇 Unmute' : '🎙️ Mute' }) }), (0, jsx_runtime_1.jsx)("button", { onClick: onEndCall, className: "flex items-center gap-2 px-4 py-2 bg-rose-600 hover:bg-rose-500 text-white text-xs font-semibold rounded-xl transition-all shadow-lg shadow-rose-600/30", children: (0, jsx_runtime_1.jsx)("span", { children: "\uD83D\uDCDE Leave Call" }) })] })] }));
+        return () => cancelAnimationFrame(animationFrameId);
+    }, [status]);
+    const handleMute = () => {
+        const next = !muted;
+        setMuted(next);
+        onToggleMute?.(next);
+    };
+    const statusText = status === 'speaking'
+        ? 'Agent is speaking...'
+        : status === 'listening'
+            ? 'Listening to you...'
+            : status === 'connecting'
+                ? 'Connecting stream...'
+                : 'Call active';
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 16,
+            padding: 20,
+            backgroundColor: '#0c0c0e',
+            border: '1px solid rgba(255, 255, 255, 0.1)',
+            borderRadius: 16,
+            ...style,
+        }, "aria-label": "Live Voice Call", children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between' }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center', gap: 8 }, children: [(0, jsx_runtime_1.jsx)("span", { style: { width: 10, height: 10, borderRadius: '50%', backgroundColor: '#34d399' } }), (0, jsx_runtime_1.jsx)("h3", { style: { fontSize: 14, fontWeight: 600, color: '#ffffff', margin: 0 }, children: title })] }), (0, jsx_runtime_1.jsx)("span", { style: { fontSize: 12, color: '#a3a3a3', fontFamily: 'monospace' }, children: statusText })] }), (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 16, backgroundColor: 'rgba(10, 10, 10, 0.6)', borderRadius: 12, border: '1px solid rgba(255, 255, 255, 0.05)' }, children: (0, jsx_runtime_1.jsx)("canvas", { ref: canvasRef, width: 380, height: 70, style: { width: '100%', height: 70 } }) }), transcripts.length > 0 && ((0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flexDirection: 'column', gap: 8, maxHeight: 160, overflowY: 'auto', paddingRight: 4 }, children: transcripts.map((t, idx) => ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', gap: 2, fontSize: 12 }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', fontSize: 11, color: '#737373' }, children: [(0, jsx_runtime_1.jsx)("span", { style: { fontWeight: 600, color: '#d4d4d4' }, children: t.speaker }), (0, jsx_runtime_1.jsx)("span", { children: t.time })] }), (0, jsx_runtime_1.jsx)("p", { style: { color: '#e5e5e5', backgroundColor: 'rgba(255, 255, 255, 0.05)', padding: 8, borderRadius: 8, margin: 0 }, children: t.text })] }, idx))) })), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 12, paddingTop: 8 }, children: [(0, jsx_runtime_1.jsx)("button", { onClick: handleMute, style: {
+                            padding: '8px 16px',
+                            fontSize: 12,
+                            fontWeight: 500,
+                            borderRadius: 12,
+                            border: '1px solid rgba(255, 255, 255, 0.1)',
+                            cursor: 'pointer',
+                            backgroundColor: muted ? 'rgba(244, 63, 94, 0.2)' : 'rgba(255, 255, 255, 0.05)',
+                            color: muted ? '#fda4af' : '#d4d4d4',
+                        }, children: muted ? 'Unmute Mic' : 'Mute Mic' }), onEndCall && ((0, jsx_runtime_1.jsx)("button", { onClick: onEndCall, style: { display: 'inline-flex', alignItems: 'center', gap: 8, padding: '8px 16px', backgroundColor: '#e11d48', color: '#ffffff', fontSize: 12, fontWeight: 600, borderRadius: 12, border: 'none', cursor: 'pointer' }, children: "End Call" }))] })] }));
 };
 exports.LiveVoiceCall = LiveVoiceCall;

package/dist/agents/LiveVoiceCall.d.ts

@@ -1,17 +1,17 @@
 import React from 'react';
 export interface LiveVoiceCallProps {
-    active: boolean;
-    muted: boolean;
     title?: string;
-    statusText?: string;
-    transcripts?: {
+    status?: 'connecting' | 'connected' | 'speaking' | 'listening' | 'ended';
+    onEndCall?: () => void;
+    onToggleMute?: (muted: boolean) => void;
+    isMuted?: boolean;
+    transcripts?: Array<{
         speaker: string;
         text: string;
         time: string;
-    }[];
-    onToggleMute: () => void;
-    onEndCall: () => void;
+    }>;
     className?: string;
+    style?: React.CSSProperties;
 }
 export declare const LiveVoiceCall: React.FC<LiveVoiceCallProps>;
 //# sourceMappingURL=LiveVoiceCall.d.ts.map

package/dist/agents/LiveVoiceCall.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LiveVoiceCall.d.ts","sourceRoot":"","sources":["../../src/agents/LiveVoiceCall.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAA;AAEhD,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,OAAO,CAAA;IACf,KAAK,EAAE,OAAO,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,WAAW,CAAC,EAAE;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,EAAE,CAAA;IAC/D,YAAY,EAAE,MAAM,IAAI,CAAA;IACxB,SAAS,EAAE,MAAM,IAAI,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA0HtD,CAAA"}
+{"version":3,"file":"LiveVoiceCall.d.ts","sourceRoot":"","sources":["../../src/agents/LiveVoiceCall.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAA;AAE1D,MAAM,WAAW,kBAAkB;IACjC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,YAAY,GAAG,WAAW,GAAG,UAAU,GAAG,WAAW,GAAG,OAAO,CAAA;IACxE,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;IACvC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,WAAW,CAAC,EAAE,KAAK,CAAC;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;IACpE,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC5B;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA+ItD,CAAA"}

package/dist/agents/LiveVoiceCall.js

@@ -1,59 +1,75 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef } from 'react';
-export const LiveVoiceCall = ({ active, muted, title = 'Duplex Voice Session', statusText = 'Connected · 24kHz Opus', transcripts = [], onToggleMute, onEndCall, className = '', }) => {
+import { useEffect, useRef, useState } from 'react';
+export const LiveVoiceCall = ({ title = 'AI Voice Call', status = 'connected', onEndCall, onToggleMute, isMuted = false, transcripts = [], className = '', style, }) => {
     const canvasRef = useRef(null);
-    const animFrameRef = useRef(null);
+    const [muted, setMuted] = useState(isMuted);
+    // Animated visualizer
     useEffect(() => {
-        if (!active)
-            return;
         const canvas = canvasRef.current;
         if (!canvas)
             return;
         const ctx = canvas.getContext('2d');
         if (!ctx)
             return;
+        let animationFrameId;
         let phase = 0;
         const render = () => {
             ctx.clearRect(0, 0, canvas.width, canvas.height);
-            const width = canvas.width;
-            const height = canvas.height;
-            const centerY = height / 2;
-            const bars = 36;
-            const barWidth = width / bars - 2;
-            for (let i = 0; i < bars; i++) {
-                const amplitude = muted
-                    ? 4
-                    : Math.sin(phase + i * 0.3) * 18 + Math.cos(phase * 1.5 + i * 0.2) * 12 + 22;
-                const barHeight = Math.max(4, Math.abs(amplitude));
-                const gradient = ctx.createLinearGradient(0, centerY - barHeight, 0, centerY + barHeight);
-                if (muted) {
-                    gradient.addColorStop(0, '#71717a');
-                    gradient.addColorStop(1, '#3f3f46');
-                }
-                else {
-                    gradient.addColorStop(0, '#818cf8');
-                    gradient.addColorStop(0.5, '#c084fc');
-                    gradient.addColorStop(1, '#38bdf8');
-                }
-                ctx.fillStyle = gradient;
+            const centerY = canvas.height / 2;
+            const numBars = 32;
+            const barWidth = 4;
+            const spacing = (canvas.width - numBars * barWidth) / (numBars - 1);
+            for (let i = 0; i < numBars; i++) {
+                const x = i * (barWidth + spacing);
+                const height = status === 'speaking' || status === 'listening'
+                    ? Math.sin(phase + i * 0.25) * 20 + 24
+                    : 6;
+                ctx.fillStyle =
+                    status === 'speaking'
+                        ? '#34d399'
+                        : status === 'listening'
+                            ? '#818cf8'
+                            : '#737373';
                 ctx.beginPath();
-                ctx.roundRect(i * (barWidth + 2), centerY - barHeight / 2, barWidth, barHeight, 4);
+                ctx.roundRect(x, centerY - height / 2, barWidth, height, 2);
                 ctx.fill();
             }
-            phase += muted ? 0.02 : 0.08;
-            animFrameRef.current = requestAnimationFrame(render);
+            phase += 0.08;
+            animationFrameId = requestAnimationFrame(render);
         };
         render();
-        return () => {
-            if (animFrameRef.current) {
-                cancelAnimationFrame(animFrameRef.current);
-            }
-        };
-    }, [active, muted]);
-    if (!active)
-        return null;
-    return (_jsxs("div", { className: `flex flex-col gap-4 p-5 bg-neutral-900/80 backdrop-blur-xl border border-white/15 rounded-2xl shadow-2xl ${className}`, role: "dialog", "aria-label": "Live Voice Call", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "w-2.5 h-2.5 rounded-full bg-emerald-400 animate-pulse" }), _jsx("h3", { className: "text-sm font-semibold text-white", children: title })] }), _jsx("span", { className: "text-xs text-neutral-400 font-mono", children: statusText })] }), _jsx("div", { className: "flex items-center justify-center p-4 bg-neutral-950/60 rounded-xl border border-white/5", children: _jsx("canvas", { ref: canvasRef, width: 380, height: 70, className: "w-full h-[70px]" }) }), transcripts.length > 0 && (_jsx("div", { className: "flex flex-col gap-2 max-h-40 overflow-y-auto pr-1", children: transcripts.map((t, idx) => (_jsxs("div", { className: "flex flex-col gap-0.5 text-xs", children: [_jsxs("div", { className: "flex items-center justify-between text-[11px] text-neutral-500", children: [_jsx("span", { className: "font-semibold text-neutral-300", children: t.speaker }), _jsx("span", { children: t.time })] }), _jsx("p", { className: "text-neutral-200 bg-white/5 p-2 rounded-lg", children: t.text })] }, idx))) })), _jsxs("div", { className: "flex items-center justify-center gap-3 pt-2", children: [_jsx("button", { onClick: onToggleMute, className: `flex items-center gap-2 px-4 py-2 rounded-xl text-xs font-semibold transition-all border ${muted
-                            ? 'bg-rose-500/20 text-rose-300 border-rose-500/40 hover:bg-rose-500/30'
-                            : 'bg-white/10 text-white border-white/20 hover:bg-white/15'}`, children: _jsx("span", { children: muted ? '🔇 Unmute' : '🎙️ Mute' }) }), _jsx("button", { onClick: onEndCall, className: "flex items-center gap-2 px-4 py-2 bg-rose-600 hover:bg-rose-500 text-white text-xs font-semibold rounded-xl transition-all shadow-lg shadow-rose-600/30", children: _jsx("span", { children: "\uD83D\uDCDE Leave Call" }) })] })] }));
+        return () => cancelAnimationFrame(animationFrameId);
+    }, [status]);
+    const handleMute = () => {
+        const next = !muted;
+        setMuted(next);
+        onToggleMute?.(next);
+    };
+    const statusText = status === 'speaking'
+        ? 'Agent is speaking...'
+        : status === 'listening'
+            ? 'Listening to you...'
+            : status === 'connecting'
+                ? 'Connecting stream...'
+                : 'Call active';
+    return (_jsxs("div", { style: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 16,
+            padding: 20,
+            backgroundColor: '#0c0c0e',
+            border: '1px solid rgba(255, 255, 255, 0.1)',
+            borderRadius: 16,
+            ...style,
+        }, "aria-label": "Live Voice Call", children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between' }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 8 }, children: [_jsx("span", { style: { width: 10, height: 10, borderRadius: '50%', backgroundColor: '#34d399' } }), _jsx("h3", { style: { fontSize: 14, fontWeight: 600, color: '#ffffff', margin: 0 }, children: title })] }), _jsx("span", { style: { fontSize: 12, color: '#a3a3a3', fontFamily: 'monospace' }, children: statusText })] }), _jsx("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 16, backgroundColor: 'rgba(10, 10, 10, 0.6)', borderRadius: 12, border: '1px solid rgba(255, 255, 255, 0.05)' }, children: _jsx("canvas", { ref: canvasRef, width: 380, height: 70, style: { width: '100%', height: 70 } }) }), transcripts.length > 0 && (_jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: 8, maxHeight: 160, overflowY: 'auto', paddingRight: 4 }, children: transcripts.map((t, idx) => (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 2, fontSize: 12 }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', fontSize: 11, color: '#737373' }, children: [_jsx("span", { style: { fontWeight: 600, color: '#d4d4d4' }, children: t.speaker }), _jsx("span", { children: t.time })] }), _jsx("p", { style: { color: '#e5e5e5', backgroundColor: 'rgba(255, 255, 255, 0.05)', padding: 8, borderRadius: 8, margin: 0 }, children: t.text })] }, idx))) })), _jsxs("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 12, paddingTop: 8 }, children: [_jsx("button", { onClick: handleMute, style: {
+                            padding: '8px 16px',
+                            fontSize: 12,
+                            fontWeight: 500,
+                            borderRadius: 12,
+                            border: '1px solid rgba(255, 255, 255, 0.1)',
+                            cursor: 'pointer',
+                            backgroundColor: muted ? 'rgba(244, 63, 94, 0.2)' : 'rgba(255, 255, 255, 0.05)',
+                            color: muted ? '#fda4af' : '#d4d4d4',
+                        }, children: muted ? 'Unmute Mic' : 'Mute Mic' }), onEndCall && (_jsx("button", { onClick: onEndCall, style: { display: 'inline-flex', alignItems: 'center', gap: 8, padding: '8px 16px', backgroundColor: '#e11d48', color: '#ffffff', fontSize: 12, fontWeight: 600, borderRadius: 12, border: 'none', cursor: 'pointer' }, children: "End Call" }))] })] }));
 };
 //# sourceMappingURL=LiveVoiceCall.js.map

package/dist/agents/LiveVoiceCall.js.map

@@ -1 +1 @@
-{"version":3,"file":"LiveVoiceCall.js","sourceRoot":"","sources":["../../src/agents/LiveVoiceCall.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"LiveVoiceCall.js","sourceRoot":"","sources":["../../src/agents/LiveVoiceCall.tsx"],"names":[],"mappings":"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"}

package/dist/agents/MCPHub.cjs

@@ -2,13 +2,24 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MCPHub = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const MCPHub = ({ servers, onToggleTool, onReconnect, onAddServer, className = '', }) => {
-    return ((0, jsx_runtime_1.jsxs)("div", { className: `flex flex-col gap-3 p-4 bg-neutral-900/60 backdrop-blur-md border border-white/10 rounded-2xl ${className}`, "aria-label": "Model Context Protocol Hub", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-lg", children: "\uD83D\uDD0C" }), (0, jsx_runtime_1.jsx)("h3", { className: "text-sm font-semibold text-white", children: "Model Context Protocol (MCP)" }), (0, jsx_runtime_1.jsxs)("span", { className: "px-1.5 py-0.5 rounded-full text-[10px] bg-white/10 text-neutral-300 font-mono", children: [servers.length, " servers"] })] }), onAddServer && ((0, jsx_runtime_1.jsx)("button", { onClick: onAddServer, className: "px-2.5 py-1 text-xs font-medium text-indigo-300 bg-indigo-500/10 hover:bg-indigo-500/20 border border-indigo-500/30 rounded-lg transition-all", children: "+ Add Server" }))] }), (0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-3", children: servers.map((server) => ((0, jsx_runtime_1.jsxs)("div", { className: "p-3 bg-white/5 border border-white/10 rounded-xl flex flex-col gap-2.5", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: `w-2 h-2 rounded-full ${server.status === 'connected'
-                                                ? 'bg-emerald-400 shadow-sm shadow-emerald-400/50'
-                                                : server.status === 'connecting'
-                                                    ? 'bg-amber-400 animate-pulse'
-                                                    : 'bg-rose-400'}` }), (0, jsx_runtime_1.jsx)("span", { className: "text-xs font-semibold text-white", children: server.name }), (0, jsx_runtime_1.jsx)("span", { className: "text-[10px] text-neutral-400 font-mono uppercase bg-white/5 px-1 py-0.5 rounded", children: server.transport })] }), (0, jsx_runtime_1.jsx)("button", { onClick: () => onReconnect(server.id), className: "text-[11px] text-neutral-400 hover:text-white transition-colors", title: "Reconnect server", children: "\u21BB" })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-wrap gap-1.5", children: server.tools.map((tool) => ((0, jsx_runtime_1.jsx)("button", { onClick: () => onToggleTool(server.id, tool.name, !tool.enabled), className: `px-2 py-0.5 rounded text-[11px] font-mono transition-all border ${tool.enabled
-                                    ? 'bg-emerald-500/15 text-emerald-300 border-emerald-500/30'
-                                    : 'bg-white/5 text-neutral-500 border-white/5 line-through opacity-60'}`, title: tool.description, children: tool.name }, tool.name))) })] }, server.id))) })] }));
+const MCPHub = ({ servers, onConnectServer, onDisconnectServer, onOpenSettings, className = '', style, }) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 16,
+            padding: 20,
+            backgroundColor: '#0c0c0e',
+            border: '1px solid rgba(255, 255, 255, 0.1)',
+            borderRadius: 16,
+            ...style,
+        }, "aria-label": "MCP Server Hub", children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between' }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center', gap: 8 }, children: [(0, jsx_runtime_1.jsx)("span", { style: { fontSize: 18 }, children: "\uD83D\uDD0C" }), (0, jsx_runtime_1.jsx)("h3", { style: { fontSize: 14, fontWeight: 600, color: '#ffffff', margin: 0 }, children: "Model Context Protocol (MCP)" }), (0, jsx_runtime_1.jsxs)("span", { style: { padding: '2px 6px', borderRadius: 9999, fontSize: 10, backgroundColor: 'rgba(255, 255, 255, 0.1)', color: '#d4d4d4', fontFamily: 'monospace' }, children: [servers.length, " Active"] })] }), onOpenSettings && ((0, jsx_runtime_1.jsx)("button", { onClick: onOpenSettings, style: { padding: '4px 10px', fontSize: 12, fontWeight: 500, color: '#a5b4fc', backgroundColor: 'rgba(99, 102, 241, 0.1)', border: '1px solid rgba(99, 102, 241, 0.3)', borderRadius: 8, cursor: 'pointer' }, children: "Manage Servers" }))] }), (0, jsx_runtime_1.jsx)("div", { style: { display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: 12 }, children: servers.map((server) => {
+                    const isConnected = server.status === 'connected';
+                    return ((0, jsx_runtime_1.jsxs)("div", { style: { padding: 12, backgroundColor: 'rgba(255, 255, 255, 0.05)', border: '1px solid rgba(255, 255, 255, 0.1)', borderRadius: 12, display: 'flex', flexDirection: 'column', gap: 10 }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between' }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center', gap: 8 }, children: [(0, jsx_runtime_1.jsx)("span", { style: {
+                                                    width: 8,
+                                                    height: 8,
+                                                    borderRadius: '50%',
+                                                    backgroundColor: isConnected ? '#34d399' : '#f87171',
+                                                } }), (0, jsx_runtime_1.jsx)("span", { style: { fontSize: 12, fontWeight: 600, color: '#ffffff' }, children: server.name }), (0, jsx_runtime_1.jsx)("span", { style: { fontSize: 10, color: '#a3a3a3', fontFamily: 'monospace', textTransform: 'uppercase', backgroundColor: 'rgba(255, 255, 255, 0.05)', padding: '2px 4px', borderRadius: 4 }, children: server.transport })] }), (0, jsx_runtime_1.jsx)("button", { onClick: () => (isConnected ? onDisconnectServer?.(server.id) : onConnectServer?.(server.id)), style: { fontSize: 11, color: '#a3a3a3', background: 'none', border: 'none', cursor: 'pointer' }, children: isConnected ? 'Disconnect' : 'Connect' })] }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexWrap: 'wrap', gap: 6 }, children: [(0, jsx_runtime_1.jsxs)("span", { style: { fontSize: 11, color: '#a3a3a3', backgroundColor: 'rgba(255, 255, 255, 0.05)', padding: '2px 6px', borderRadius: 4 }, children: ["\uD83D\uDEE0\uFE0F ", server.toolsCount, " tools"] }), (0, jsx_runtime_1.jsxs)("span", { style: { fontSize: 11, color: '#a3a3a3', backgroundColor: 'rgba(255, 255, 255, 0.05)', padding: '2px 6px', borderRadius: 4 }, children: ["\uD83D\uDCE6 ", server.resourcesCount, " resources"] })] })] }, server.id));
+                }) })] }));
 };
 exports.MCPHub = MCPHub;

package/dist/agents/MCPHub.d.ts

@@ -2,23 +2,18 @@ import React from 'react';
 export interface MCPServerInfo {
     id: string;
     name: string;
-    status: 'connected' | 'connecting' | 'disconnected' | 'error';
     transport: 'sse' | 'stdio' | 'websocket';
-    endpoint?: string;
+    status: 'connected' | 'disconnected' | 'error';
     toolsCount: number;
     resourcesCount: number;
-    tools: {
-        name: string;
-        description: string;
-        enabled: boolean;
-    }[];
 }
 export interface MCPHubProps {
     servers: MCPServerInfo[];
-    onToggleTool: (serverId: string, toolName: string, enabled: boolean) => void;
-    onReconnect: (serverId: string) => void;
-    onAddServer?: () => void;
+    onConnectServer?: (serverId: string) => void;
+    onDisconnectServer?: (serverId: string) => void;
+    onOpenSettings?: () => void;
     className?: string;
+    style?: React.CSSProperties;
 }
 export declare const MCPHub: React.FC<MCPHubProps>;
 //# sourceMappingURL=MCPHub.d.ts.map

package/dist/agents/MCPHub.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MCPHub.d.ts","sourceRoot":"","sources":["../../src/agents/MCPHub.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,EAAE,WAAW,GAAG,YAAY,GAAG,cAAc,GAAG,OAAO,CAAA;IAC7D,SAAS,EAAE,KAAK,GAAG,OAAO,GAAG,WAAW,CAAA;IACxC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,UAAU,EAAE,MAAM,CAAA;IAClB,cAAc,EAAE,MAAM,CAAA;IACtB,KAAK,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,WAAW,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,OAAO,CAAA;KAAE,EAAE,CAAA;CACjE;AAED,MAAM,WAAW,WAAW;IAC1B,OAAO,EAAE,aAAa,EAAE,CAAA;IACxB,YAAY,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;IAC5E,WAAW,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAkFxC,CAAA"}
+{"version":3,"file":"MCPHub.d.ts","sourceRoot":"","sources":["../../src/agents/MCPHub.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,EAAE,KAAK,GAAG,OAAO,GAAG,WAAW,CAAA;IACxC,MAAM,EAAE,WAAW,GAAG,cAAc,GAAG,OAAO,CAAA;IAC9C,UAAU,EAAE,MAAM,CAAA;IAClB,cAAc,EAAE,MAAM,CAAA;CACvB;AAED,MAAM,WAAW,WAAW;IAC1B,OAAO,EAAE,aAAa,EAAE,CAAA;IACxB,eAAe,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;IAC5C,kBAAkB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/C,cAAc,CAAC,EAAE,MAAM,IAAI,CAAA;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC5B;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAuFxC,CAAA"}

package/dist/agents/MCPHub.js

@@ -1,11 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const MCPHub = ({ servers, onToggleTool, onReconnect, onAddServer, className = '', }) => {
-    return (_jsxs("div", { className: `flex flex-col gap-3 p-4 bg-neutral-900/60 backdrop-blur-md border border-white/10 rounded-2xl ${className}`, "aria-label": "Model Context Protocol Hub", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-lg", children: "\uD83D\uDD0C" }), _jsx("h3", { className: "text-sm font-semibold text-white", children: "Model Context Protocol (MCP)" }), _jsxs("span", { className: "px-1.5 py-0.5 rounded-full text-[10px] bg-white/10 text-neutral-300 font-mono", children: [servers.length, " servers"] })] }), onAddServer && (_jsx("button", { onClick: onAddServer, className: "px-2.5 py-1 text-xs font-medium text-indigo-300 bg-indigo-500/10 hover:bg-indigo-500/20 border border-indigo-500/30 rounded-lg transition-all", children: "+ Add Server" }))] }), _jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-3", children: servers.map((server) => (_jsxs("div", { className: "p-3 bg-white/5 border border-white/10 rounded-xl flex flex-col gap-2.5", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: `w-2 h-2 rounded-full ${server.status === 'connected'
-                                                ? 'bg-emerald-400 shadow-sm shadow-emerald-400/50'
-                                                : server.status === 'connecting'
-                                                    ? 'bg-amber-400 animate-pulse'
-                                                    : 'bg-rose-400'}` }), _jsx("span", { className: "text-xs font-semibold text-white", children: server.name }), _jsx("span", { className: "text-[10px] text-neutral-400 font-mono uppercase bg-white/5 px-1 py-0.5 rounded", children: server.transport })] }), _jsx("button", { onClick: () => onReconnect(server.id), className: "text-[11px] text-neutral-400 hover:text-white transition-colors", title: "Reconnect server", children: "\u21BB" })] }), _jsx("div", { className: "flex flex-wrap gap-1.5", children: server.tools.map((tool) => (_jsx("button", { onClick: () => onToggleTool(server.id, tool.name, !tool.enabled), className: `px-2 py-0.5 rounded text-[11px] font-mono transition-all border ${tool.enabled
-                                    ? 'bg-emerald-500/15 text-emerald-300 border-emerald-500/30'
-                                    : 'bg-white/5 text-neutral-500 border-white/5 line-through opacity-60'}`, title: tool.description, children: tool.name }, tool.name))) })] }, server.id))) })] }));
+export const MCPHub = ({ servers, onConnectServer, onDisconnectServer, onOpenSettings, className = '', style, }) => {
+    return (_jsxs("div", { style: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 16,
+            padding: 20,
+            backgroundColor: '#0c0c0e',
+            border: '1px solid rgba(255, 255, 255, 0.1)',
+            borderRadius: 16,
+            ...style,
+        }, "aria-label": "MCP Server Hub", children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between' }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 8 }, children: [_jsx("span", { style: { fontSize: 18 }, children: "\uD83D\uDD0C" }), _jsx("h3", { style: { fontSize: 14, fontWeight: 600, color: '#ffffff', margin: 0 }, children: "Model Context Protocol (MCP)" }), _jsxs("span", { style: { padding: '2px 6px', borderRadius: 9999, fontSize: 10, backgroundColor: 'rgba(255, 255, 255, 0.1)', color: '#d4d4d4', fontFamily: 'monospace' }, children: [servers.length, " Active"] })] }), onOpenSettings && (_jsx("button", { onClick: onOpenSettings, style: { padding: '4px 10px', fontSize: 12, fontWeight: 500, color: '#a5b4fc', backgroundColor: 'rgba(99, 102, 241, 0.1)', border: '1px solid rgba(99, 102, 241, 0.3)', borderRadius: 8, cursor: 'pointer' }, children: "Manage Servers" }))] }), _jsx("div", { style: { display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: 12 }, children: servers.map((server) => {
+                    const isConnected = server.status === 'connected';
+                    return (_jsxs("div", { style: { padding: 12, backgroundColor: 'rgba(255, 255, 255, 0.05)', border: '1px solid rgba(255, 255, 255, 0.1)', borderRadius: 12, display: 'flex', flexDirection: 'column', gap: 10 }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between' }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 8 }, children: [_jsx("span", { style: {
+                                                    width: 8,
+                                                    height: 8,
+                                                    borderRadius: '50%',
+                                                    backgroundColor: isConnected ? '#34d399' : '#f87171',
+                                                } }), _jsx("span", { style: { fontSize: 12, fontWeight: 600, color: '#ffffff' }, children: server.name }), _jsx("span", { style: { fontSize: 10, color: '#a3a3a3', fontFamily: 'monospace', textTransform: 'uppercase', backgroundColor: 'rgba(255, 255, 255, 0.05)', padding: '2px 4px', borderRadius: 4 }, children: server.transport })] }), _jsx("button", { onClick: () => (isConnected ? onDisconnectServer?.(server.id) : onConnectServer?.(server.id)), style: { fontSize: 11, color: '#a3a3a3', background: 'none', border: 'none', cursor: 'pointer' }, children: isConnected ? 'Disconnect' : 'Connect' })] }), _jsxs("div", { style: { display: 'flex', flexWrap: 'wrap', gap: 6 }, children: [_jsxs("span", { style: { fontSize: 11, color: '#a3a3a3', backgroundColor: 'rgba(255, 255, 255, 0.05)', padding: '2px 6px', borderRadius: 4 }, children: ["\uD83D\uDEE0\uFE0F ", server.toolsCount, " tools"] }), _jsxs("span", { style: { fontSize: 11, color: '#a3a3a3', backgroundColor: 'rgba(255, 255, 255, 0.05)', padding: '2px 6px', borderRadius: 4 }, children: ["\uD83D\uDCE6 ", server.resourcesCount, " resources"] })] })] }, server.id));
+                }) })] }));
 };
 //# sourceMappingURL=MCPHub.js.map

package/dist/agents/MCPHub.js.map

@@ -1 +1 @@
-{"version":3,"file":"MCPHub.js","sourceRoot":"","sources":["../../src/agents/MCPHub.tsx"],"names":[],"mappings":";AAqBA,MAAM,CAAC,MAAM,MAAM,GAA0B,CAAC,EAC5C,OAAO,EACP,YAAY,EACZ,WAAW,EACX,WAAW,EACX,SAAS,GAAG,EAAE,GACf,EAAE,EAAE;IACH,OAAO,CACL,eACE,SAAS,EAAE,iGAAiG,SAAS,EAAE,gBAC5G,4BAA4B,aAEvC,eAAK,SAAS,EAAC,mCAAmC,aAChD,eAAK,SAAS,EAAC,yBAAyB,aACtC,eAAM,SAAS,EAAC,SAAS,6BAAU,EACnC,aAAI,SAAS,EAAC,kCAAkC,6CAAkC,EAClF,gBAAM,SAAS,EAAC,+EAA+E,aAC5F,OAAO,CAAC,MAAM,gBACV,IACH,EACL,WAAW,IAAI,CACd,iBACE,OAAO,EAAE,WAAW,EACpB,SAAS,EAAC,+IAA+I,6BAGlJ,CACV,IACG,EAEN,cAAK,SAAS,EAAC,uCAAuC,YACnD,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CACvB,eAEE,SAAS,EAAC,wEAAwE,aAElF,eAAK,SAAS,EAAC,mCAAmC,aAChD,eAAK,SAAS,EAAC,yBAAyB,aACtC,eACE,SAAS,EAAE,wBACT,MAAM,CAAC,MAAM,KAAK,WAAW;gDAC3B,CAAC,CAAC,gDAAgD;gDAClD,CAAC,CAAC,MAAM,CAAC,MAAM,KAAK,YAAY;oDAChC,CAAC,CAAC,4BAA4B;oDAC9B,CAAC,CAAC,aACN,EAAE,GACF,EACF,eAAM,SAAS,EAAC,kCAAkC,YAAE,MAAM,CAAC,IAAI,GAAQ,EACvE,eAAM,SAAS,EAAC,iFAAiF,YAC9F,MAAM,CAAC,SAAS,GACZ,IACH,EACN,iBACE,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,MAAM,CAAC,EAAE,CAAC,EACrC,SAAS,EAAC,iEAAiE,EAC3E,KAAK,EAAC,kBAAkB,uBAGjB,IACL,EAEN,cAAK,SAAS,EAAC,wBAAwB,YACpC,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAC1B,iBAEE,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,EAChE,SAAS,EAAE,mEACT,IAAI,CAAC,OAAO;oCACV,CAAC,CAAC,0DAA0D;oCAC5D,CAAC,CAAC,oEACN,EAAE,EACF,KAAK,EAAE,IAAI,CAAC,WAAW,YAEtB,IAAI,CAAC,IAAI,IATL,IAAI,CAAC,IAAI,CAUP,CACV,CAAC,GACE,KA3CD,MAAM,CAAC,EAAE,CA4CV,CACP,CAAC,GACE,IACF,CACP,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"MCPHub.js","sourceRoot":"","sources":["../../src/agents/MCPHub.tsx"],"names":[],"mappings":"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"}

package/dist/agents/ShortcutsSheet.cjs

@@ -3,22 +3,42 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ShortcutsSheet = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const DEFAULT_SHORTCUTS = [
-    { keys: ['⌘', 'K'], label: 'Open Omni Search / Command Palette', category: 'Navigation' },
-    { keys: ['⌘', 'B'], label: 'Toggle Explorer Sidebar', category: 'Workspace' },
-    { keys: ['⌘', 'J'], label: 'Toggle Far-Right Intelligence Dock', category: 'Workspace' },
-    { keys: ['⌘', '/'], label: 'Show Keyboard Shortcuts Cheat Sheet', category: 'Workspace' },
-    { keys: ['⌘', 'Enter'], label: 'Submit Prompt / Message', category: 'Chat' },
-    { keys: ['⌘', 'E'], label: 'Export Markdown Transcript', category: 'Chat' },
-    { keys: ['⌘', 'D'], label: 'Toggle Code Diff Inspector', category: 'Editing' },
-    { keys: ['⌘', 'M'], label: 'Toggle Duplex Voice Mic Mute', category: 'Chat' },
+    { key: '⌘ + K', description: 'Open Command Palette & Global Search', category: 'navigation' },
+    { key: '⌘ + /', description: 'Open Keyboard Shortcuts Sheet', category: 'navigation' },
+    { key: '⌘ + .', description: 'Toggle Live AI Voice Call', category: 'actions' },
+    { key: '⌘ + J', description: 'Toggle Artifacts Inspector & Code Diff', category: 'workspace' },
+    { key: '⌘ + I', description: 'Toggle Intelligence Dock (Channels & Roster)', category: 'workspace' },
+    { key: '⌘ + B', description: 'Toggle Left Channels & Conversation Rail', category: 'workspace' },
+    { key: '⌘ + N', description: 'Create New Conversation or Channel', category: 'actions' },
+    { key: 'Esc', description: 'Close Active Modal / Clear Selection', category: 'actions' },
 ];
-const ShortcutsSheet = ({ isOpen, onClose, customShortcuts, className = '', }) => {
-    if (!isOpen)
+const ShortcutsSheet = ({ shortcuts = DEFAULT_SHORTCUTS, onClose, open = true, className = '', style, }) => {
+    if (!open)
         return null;
-    const list = customShortcuts || DEFAULT_SHORTCUTS;
-    const categories = Array.from(new Set(list.map((s) => s.category)));
-    return ((0, jsx_runtime_1.jsx)("div", { className: `fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-md ${className}`, role: "dialog", "aria-modal": "true", "aria-label": "Keyboard Shortcuts", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col w-full max-w-lg bg-neutral-900 border border-white/15 rounded-2xl shadow-2xl p-6 gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between border-b border-white/10 pb-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-lg", children: "\u2328\uFE0F" }), (0, jsx_runtime_1.jsx)("h2", { className: "text-sm font-semibold text-white", children: "Keyboard Shortcuts" })] }), (0, jsx_runtime_1.jsx)("button", { onClick: onClose, className: "text-neutral-400 hover:text-white text-xs px-2 py-1 rounded bg-white/5", children: "Esc" })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col gap-4 max-h-96 overflow-y-auto pr-1", children: categories.map((cat) => ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-2", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-[11px] font-semibold text-neutral-400 uppercase tracking-wider", children: cat }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col gap-1.5", children: list
+    const categories = Array.from(new Set(shortcuts.map((s) => s.category)));
+    return ((0, jsx_runtime_1.jsx)("div", { style: {
+            position: 'fixed',
+            inset: 0,
+            backgroundColor: 'var(--surface-scrim, rgb(0 0 0 / .75))',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            zIndex: 100,
+            padding: 16,
+        }, onClick: onClose, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                display: 'flex',
+                flexDirection: 'column',
+                width: '100%',
+                maxWidth: 520,
+                backgroundColor: '#171717',
+                border: '1px solid rgba(255, 255, 255, 0.15)',
+                borderRadius: 16,
+                boxShadow: '0 20px 40px rgba(0,0,0,0.5)',
+                padding: 24,
+                gap: 16,
+                ...style,
+            }, onClick: (e) => e.stopPropagation(), "aria-label": "Keyboard Shortcuts", children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', borderBottom: '1px solid rgba(255, 255, 255, 0.1)', paddingBottom: 12 }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center', gap: 8 }, children: [(0, jsx_runtime_1.jsx)("span", { style: { fontSize: 18 }, children: "\u2328\uFE0F" }), (0, jsx_runtime_1.jsx)("h2", { style: { fontSize: 14, fontWeight: 600, color: '#ffffff', margin: 0 }, children: "Keyboard Shortcuts" })] }), onClose && ((0, jsx_runtime_1.jsx)("button", { onClick: onClose, style: { color: '#a3a3a3', fontSize: 12, padding: '4px 8px', borderRadius: 4, backgroundColor: 'rgba(255, 255, 255, 0.05)', border: 'none', cursor: 'pointer' }, children: "Close (Esc)" }))] }), (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flexDirection: 'column', gap: 16, maxHeight: 384, overflowY: 'auto', paddingRight: 4 }, children: categories.map((cat) => ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', gap: 8 }, children: [(0, jsx_runtime_1.jsx)("h3", { style: { fontSize: 11, fontWeight: 600, color: '#a3a3a3', textTransform: 'uppercase', letterSpacing: '0.05em', margin: 0 }, children: cat }), (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flexDirection: 'column', gap: 6 }, children: shortcuts
                                     .filter((s) => s.category === cat)
-                                    .map((s, idx) => ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between py-1 px-2 rounded-lg bg-white/5 text-xs text-neutral-200", children: [(0, jsx_runtime_1.jsx)("span", { children: s.label }), (0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-1", children: s.keys.map((k, kidx) => ((0, jsx_runtime_1.jsx)("kbd", { className: "px-2 py-0.5 rounded bg-neutral-800 border border-white/10 text-[11px] font-mono text-neutral-300 font-semibold shadow-sm", children: k }, kidx))) })] }, idx))) })] }, cat))) })] }) }));
+                                    .map((s, idx) => ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '4px 8px', borderRadius: 8, backgroundColor: 'rgba(255, 255, 255, 0.05)', fontSize: 12, color: '#e5e5e5' }, children: [(0, jsx_runtime_1.jsx)("span", { children: s.description }), (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', alignItems: 'center', gap: 4 }, children: s.key.split(' ').map((k, kIdx) => ((0, jsx_runtime_1.jsx)("kbd", { style: { padding: '2px 8px', borderRadius: 4, backgroundColor: '#262626', border: '1px solid rgba(255, 255, 255, 0.1)', fontSize: 11, fontFamily: 'monospace', color: '#d4d4d4', fontWeight: 600 }, children: k }, kIdx))) })] }, idx))) })] }, cat))) })] }) }));
 };
 exports.ShortcutsSheet = ShortcutsSheet;

package/dist/agents/ShortcutsSheet.d.ts

@@ -1,14 +1,15 @@
 import React from 'react';
 export interface ShortcutItem {
-    keys: string[];
-    label: string;
-    category: 'Workspace' | 'Navigation' | 'Chat' | 'Editing';
+    key: string;
+    description: string;
+    category: 'navigation' | 'actions' | 'tools' | 'workspace';
 }
 export interface ShortcutsSheetProps {
-    isOpen: boolean;
-    onClose: () => void;
-    customShortcuts?: ShortcutItem[];
+    shortcuts?: ShortcutItem[];
+    onClose?: () => void;
+    open?: boolean;
     className?: string;
+    style?: React.CSSProperties;
 }
 export declare const ShortcutsSheet: React.FC<ShortcutsSheetProps>;
 //# sourceMappingURL=ShortcutsSheet.d.ts.map

package/dist/agents/ShortcutsSheet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ShortcutsSheet.d.ts","sourceRoot":"","sources":["../../src/agents/ShortcutsSheet.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,EAAE,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,WAAW,GAAG,YAAY,GAAG,MAAM,GAAG,SAAS,CAAA;CAC1D;AAED,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,OAAO,CAAA;IACf,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,eAAe,CAAC,EAAE,YAAY,EAAE,CAAA;IAChC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAaD,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAkExD,CAAA"}
+{"version":3,"file":"ShortcutsSheet.d.ts","sourceRoot":"","sources":["../../src/agents/ShortcutsSheet.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,MAAM,WAAW,YAAY;IAC3B,GAAG,EAAE,MAAM,CAAA;IACX,WAAW,EAAE,MAAM,CAAA;IACnB,QAAQ,EAAE,YAAY,GAAG,SAAS,GAAG,OAAO,GAAG,WAAW,CAAA;CAC3D;AAED,MAAM,WAAW,mBAAmB;IAClC,SAAS,CAAC,EAAE,YAAY,EAAE,CAAA;IAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC5B;AAaD,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA2FxD,CAAA"}