npm - openkbs - Versions diffs - 0.0.67 → 0.0.70 - Mend

openkbs 0.0.67 → 0.0.70

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (62) hide show

package/templates/.claude/skills/openkbs/examples/nodejs-demo/site/index.html ADDED Viewed

@@ -0,0 +1,658 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>NodeJS Demo - Social + Chat</title>
+    <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
+    <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
+    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <script src="https://unpkg.com/openkbs-pulse/pulse.js"></script>
+    <style>
+        * { box-sizing: border-box; margin: 0; padding: 0; }
+        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f5f5f5; }
+        .app { display: flex; height: 100vh; }
+        /* Sidebar */
+        .sidebar { width: 280px; background: white; border-right: 1px solid #e0e0e0; display: flex; flex-direction: column; }
+        .sidebar-header { padding: 15px; border-bottom: 1px solid #e0e0e0; }
+        .sidebar-header h1 { font-size: 20px; color: #333; }
+        .online-count { font-size: 12px; color: #666; margin-top: 5px; }
+        .tabs { display: flex; border-bottom: 1px solid #e0e0e0; }
+        .tab { flex: 1; padding: 12px; text-align: center; cursor: pointer; font-size: 14px; color: #666; border-bottom: 2px solid transparent; }
+        .tab.active { color: #007bff; border-bottom-color: #007bff; }
+        .users-list { flex: 1; overflow-y: auto; }
+        .user-item { display: flex; align-items: center; padding: 12px 15px; cursor: pointer; border-bottom: 1px solid #f0f0f0; }
+        .user-item:hover { background: #f8f8f8; }
+        .user-item.selected { background: #e3f2fd; }
+        .user-item.has-unread { font-weight: bold; }
+        .avatar { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: 600; font-size: 16px; margin-right: 12px; position: relative; }
+        .avatar.small { width: 32px; height: 32px; font-size: 13px; margin-right: 8px; }
+        .online-dot { position: absolute; bottom: 0; right: 0; width: 12px; height: 12px; background: #4CAF50; border-radius: 50%; border: 2px solid white; }
+        .user-info { flex: 1; }
+        .user-name { font-weight: 500; color: #333; }
+        .user-status { font-size: 12px; color: #999; }
+        .unread-badge { background: #007bff; color: white; font-size: 11px; padding: 2px 6px; border-radius: 10px; }
+        /* Main content */
+        .main { flex: 1; display: flex; flex-direction: column; }
+        .main-header { padding: 15px 20px; background: white; border-bottom: 1px solid #e0e0e0; display: flex; justify-content: space-between; align-items: center; }
+        .main-header h2 { font-size: 18px; color: #333; }
+        .connection-status { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #666; }
+        .status-dot { width: 8px; height: 8px; border-radius: 50%; }
+        .status-dot.online { background: #4CAF50; }
+        .status-dot.offline { background: #f44336; }
+        .content { flex: 1; overflow-y: auto; padding: 20px; }
+        /* Posts */
+        .posts { max-width: 600px; margin: 0 auto; }
+        .post-form { background: white; padding: 15px; border-radius: 10px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
+        .post-form textarea { width: 100%; padding: 12px; border: 1px solid #e0e0e0; border-radius: 8px; resize: none; font-size: 14px; }
+        .post-form-actions { display: flex; justify-content: flex-end; margin-top: 10px; gap: 10px; }
+        .post-form button { padding: 8px 20px; background: #007bff; color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 14px; }
+        .post-form button:disabled { background: #ccc; }
+        .image-upload { margin-top: 10px; }
+        .image-upload input[type="file"] { display: none; }
+        .upload-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; background: #f0f0f0; border: 1px solid #ddd; border-radius: 6px; cursor: pointer; font-size: 13px; color: #666; }
+        .upload-btn:hover { background: #e8e8e8; }
+        .image-preview { margin-top: 10px; position: relative; display: inline-block; }
+        .image-preview img { max-width: 200px; max-height: 150px; border-radius: 8px; }
+        .image-preview .remove-btn { position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; background: #dc3545; color: white; border: none; border-radius: 50%; cursor: pointer; font-size: 14px; line-height: 1; }
+        .uploading { opacity: 0.6; pointer-events: none; }
+        .post { background: white; padding: 15px; border-radius: 10px; margin-bottom: 15px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
+        .post-header { display: flex; align-items: center; margin-bottom: 10px; }
+        .post-meta { flex: 1; }
+        .post-author { font-weight: 600; color: #333; }
+        .post-time { font-size: 12px; color: #999; }
+        .post-content { color: #444; line-height: 1.5; }
+        .post-image { margin-top: 10px; max-width: 100%; border-radius: 8px; }
+        /* Chat */
+        .chat { display: flex; flex-direction: column; height: 100%; max-width: 800px; margin: 0 auto; width: 100%; }
+        .chat-header { display: flex; align-items: center; padding: 15px; background: white; border-radius: 10px 10px 0 0; }
+        .chat-messages { flex: 1; overflow-y: auto; padding: 20px; background: #fafafa; }
+        .chat-input { display: flex; gap: 10px; padding: 15px; background: white; border-radius: 0 0 10px 10px; }
+        .chat-input input { flex: 1; padding: 12px; border: 1px solid #e0e0e0; border-radius: 8px; font-size: 14px; }
+        .chat-input button { padding: 12px 24px; background: #007bff; color: white; border: none; border-radius: 8px; cursor: pointer; }
+        .message { display: flex; margin-bottom: 15px; max-width: 100%; }
+        .message.sent { flex-direction: row-reverse; }
+        .message-content { max-width: 70%; }
+        .message-bubble { padding: 12px 16px; border-radius: 18px; word-wrap: break-word; box-shadow: 0 1px 2px rgba(0,0,0,0.1); }
+        .message.received .message-bubble { background: white; color: #333; border: 1px solid #e0e0e0; }
+        .message.sent .message-bubble { background: #007bff; color: white; }
+        .message-time { font-size: 11px; color: #999; margin-top: 4px; padding: 0 4px; }
+        .message.sent .message-time { text-align: right; }
+        .no-chat { display: flex; align-items: center; justify-content: center; height: 100%; color: #999; font-size: 16px; }
+        /* Auth */
+        .auth-container { display: flex; align-items: center; justify-content: center; height: 100vh; background: #f5f5f5; }
+        .auth-form { background: white; padding: 30px; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); width: 100%; max-width: 400px; }
+        .auth-form h2 { margin-bottom: 20px; color: #333; }
+        .auth-form input { width: 100%; padding: 12px; margin-bottom: 15px; border: 1px solid #e0e0e0; border-radius: 8px; font-size: 14px; }
+        .auth-form button { width: 100%; padding: 12px; background: #007bff; color: white; border: none; border-radius: 8px; font-size: 14px; cursor: pointer; }
+        .auth-form button:disabled { background: #ccc; }
+        .auth-toggle { margin-top: 15px; text-align: center; color: #666; font-size: 14px; }
+        .auth-toggle a { color: #007bff; cursor: pointer; }
+        .error { color: #dc3545; font-size: 14px; margin-bottom: 15px; }
+        .logout-btn { padding: 8px 16px; background: #dc3545; color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 13px; }
+        .empty { text-align: center; padding: 40px; color: #999; }
+    </style>
+</head>
+<body>
+    <div id="root"></div>
+    <script type="text/babel">
+        const { useState, useEffect, useRef } = React;
+        const API_AUTH = '/auth';
+        const API_POSTS = '/posts';
+        // Replace with your kbId from: openkbs ls
+        const KB_ID = 'YOUR_KB_ID';
+        function App() {
+            const [user, setUser] = useState(null);
+            const [view, setView] = useState('posts'); // 'posts' or 'chat'
+            const [posts, setPosts] = useState([]);
+            const [users, setUsers] = useState([]);
+            const [onlineUsers, setOnlineUsers] = useState(new Set());
+            const [connected, setConnected] = useState(false);
+            const [selectedUser, setSelectedUser] = useState(null);
+            const [messages, setMessages] = useState({});
+            const [unreadFrom, setUnreadFrom] = useState(new Set());
+            const pulseRef = useRef(null);
+            useEffect(() => {
+                const saved = localStorage.getItem('nodejs_demo_user');
+                if (saved) setUser(JSON.parse(saved));
+            }, []);
+            // Connect to Pulse when user logs in
+            useEffect(() => {
+                if (!user?.pulseToken) return;
+                // Load posts
+                fetch(API_POSTS, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ action: 'list' })
+                })
+                .then(r => r.json())
+                .then(data => setPosts(data.posts || []))
+                .catch(console.error);
+                // Load users list
+                fetch(API_AUTH, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ action: 'users' })
+                })
+                .then(r => r.json())
+                .then(data => {
+                    const filtered = (data.users || []).filter(u => u.id !== user.id);
+                    setUsers(filtered);
+                })
+                .catch(console.error);
+                // Connect to Pulse (Ably-compatible API)
+                const realtime = new Pulse.Realtime({
+                    kbId: KB_ID,
+                    token: user.pulseToken,
+                    endpoint: user.pulseEndpoint,
+                    clientId: String(user.id),
+                    debug: false
+                });
+                pulseRef.current = realtime;
+                // Connection state
+                realtime.connection.on('connected', () => setConnected(true));
+                realtime.connection.on('disconnected', () => setConnected(false));
+                // ===== POSTS CHANNEL =====
+                const postsChannel = realtime.channels.get('posts');
+                // Subscribe to new posts
+                postsChannel.subscribe('new_post', (message) => {
+                    const post = message.data?.post || message.data;
+                    if (post?.id) {
+                        setPosts(prev => {
+                            if (prev.some(p => p.id === post.id)) return prev;
+                            return [post, ...prev];
+                        });
+                    }
+                });
+                // Presence: enter and subscribe
+                postsChannel.presence.enter({ userId: String(user.id), name: user.name });
+                postsChannel.presence.subscribe((members) => {
+                    const ids = new Set(members.map(m => Number(m.data?.userId || m.clientId)));
+                    setOnlineUsers(ids);
+                });
+                postsChannel.presence.subscribe('enter', (member) => {
+                    const userId = Number(member.data?.userId || member.clientId);
+                    setOnlineUsers(prev => new Set([...prev, userId]));
+                });
+                postsChannel.presence.subscribe('leave', (member) => {
+                    const userId = Number(member.data?.userId || member.clientId);
+                    setOnlineUsers(prev => {
+                        const next = new Set(prev);
+                        next.delete(userId);
+                        return next;
+                    });
+                });
+                // ===== PRIVATE CHANNEL =====
+                let privateChannel = null;
+                if (user.privateChannel) {
+                    console.log('Subscribing to private channel:', user.privateChannel.substring(0, 8) + '...');
+                    privateChannel = realtime.channels.get(user.privateChannel);
+                    // Subscribe to messages
+                    privateChannel.subscribe('new_message', (message) => {
+                        console.log('Received private message:', message);
+                        const msg = message.data;
+                        const fromId = msg.fromUserId;
+                        setMessages(prev => {
+                            const existing = prev[fromId] || [];
+                            if (existing.some(m => m.id === msg.id)) return prev;
+                            return { ...prev, [fromId]: [...existing, msg] };
+                        });
+                        setUnreadFrom(prev => new Set([...prev, fromId]));
+                    });
+                }
+                // Cleanup
+                return () => {
+                    postsChannel.presence.leave();
+                    if (privateChannel) privateChannel.detach();
+                    realtime.close();
+                };
+            }, [user?.pulseToken]);
+            const handleLogin = (userData) => {
+                setUser(userData);
+                localStorage.setItem('nodejs_demo_user', JSON.stringify(userData));
+            };
+            const handleLogout = () => {
+                pulseRef.current?.close();
+                setUser(null);
+                setPosts([]);
+                setUsers([]);
+                localStorage.removeItem('nodejs_demo_user');
+            };
+            const handleSelectUser = async (u) => {
+                setSelectedUser(u);
+                setView('chat');
+                setUnreadFrom(prev => {
+                    const next = new Set(prev);
+                    next.delete(u.id);
+                    return next;
+                });
+                // Load chat history
+                if (!messages[u.id]) {
+                    const res = await fetch(API_POSTS, {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({ action: 'getMessages', userId: user.id, withUserId: u.id })
+                    });
+                    const data = await res.json();
+                    setMessages(prev => ({ ...prev, [u.id]: data.messages || [] }));
+                }
+            };
+            const handleSendMessage = async (content) => {
+                if (!selectedUser || !content.trim()) return;
+                try {
+                    const res = await fetch(API_POSTS, {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({
+                            action: 'sendMessage',
+                            toUserId: selectedUser.id,
+                            message: content,
+                            fromUserId: user.id,
+                            fromUserName: user.name
+                        })
+                    });
+                    const data = await res.json();
+                    console.log('Send message response:', data);
+                    if (data.message) {
+                        setMessages(prev => {
+                            const existing = prev[selectedUser.id] || [];
+                            // Avoid duplicates
+                            if (existing.some(m => m.id === data.message.id)) return prev;
+                            return {
+                                ...prev,
+                                [selectedUser.id]: [...existing, data.message]
+                            };
+                        });
+                    } else if (data.error) {
+                        console.error('Send error:', data.error);
+                    }
+                } catch (err) {
+                    console.error('Send failed:', err);
+                }
+            };
+            if (!user) return <AuthForm onLogin={handleLogin} />;
+            return (
+                <div className="app">
+                    <Sidebar
+                        user={user}
+                        users={users}
+                        onlineUsers={onlineUsers}
+                        selectedUser={selectedUser}
+                        unreadFrom={unreadFrom}
+                        view={view}
+                        setView={setView}
+                        onSelectUser={handleSelectUser}
+                        onLogout={handleLogout}
+                    />
+                    <main className="main">
+                        <div className="main-header">
+                            <h2>{view === 'posts' ? 'Feed' : selectedUser ? `Chat with ${selectedUser.name}` : 'Messages'}</h2>
+                            <div className="connection-status">
+                                <span className={`status-dot ${connected ? 'online' : 'offline'}`}></span>
+                                {connected ? 'Connected' : 'Connecting...'}
+                            </div>
+                        </div>
+                        <div className="content">
+                            {view === 'posts' ? (
+                                <PostsView user={user} posts={posts} />
+                            ) : (
+                                <ChatView
+                                    user={user}
+                                    selectedUser={selectedUser}
+                                    messages={messages[selectedUser?.id] || []}
+                                    onSend={handleSendMessage}
+                                />
+                            )}
+                        </div>
+                    </main>
+                </div>
+            );
+        }
+        function Sidebar({ user, users, onlineUsers, selectedUser, unreadFrom, view, setView, onSelectUser, onLogout }) {
+            return (
+                <div className="sidebar">
+                    <div className="sidebar-header">
+                        <h1>NodeJS Demo</h1>
+                        <div className="online-count">{onlineUsers.size} users online</div>
+                    </div>
+                    <div className="tabs">
+                        <div className={`tab ${view === 'posts' ? 'active' : ''}`} onClick={() => setView('posts')}>Feed</div>
+                        <div className={`tab ${view === 'chat' ? 'active' : ''}`} onClick={() => setView('chat')}>Chat</div>
+                    </div>
+                    <div className="users-list">
+                        {/* Current user */}
+                        <div className="user-item" style={{ background: '#f8f8f8' }}>
+                            <Avatar name={user.name} color={user.avatarColor} isOnline={true} />
+                            <div className="user-info">
+                                <div className="user-name">{user.name} (you)</div>
+                                <div className="user-status">Online</div>
+                            </div>
+                            <button className="logout-btn" onClick={onLogout}>Logout</button>
+                        </div>
+                        {/* Other users */}
+                        {users.map(u => (
+                            <div
+                                key={u.id}
+                                className={`user-item ${selectedUser?.id === u.id ? 'selected' : ''} ${unreadFrom.has(u.id) ? 'has-unread' : ''}`}
+                                onClick={() => onSelectUser(u)}
+                            >
+                                <Avatar name={u.name} color={u.avatarColor} isOnline={onlineUsers.has(u.id)} />
+                                <div className="user-info">
+                                    <div className="user-name">{u.name}</div>
+                                    <div className="user-status">{onlineUsers.has(u.id) ? 'Online' : 'Offline'}</div>
+                                </div>
+                                {unreadFrom.has(u.id) && <span className="unread-badge">New</span>}
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            );
+        }
+        function Avatar({ name, color, isOnline, small }) {
+            const initial = (name || '?')[0].toUpperCase();
+            return (
+                <div className={`avatar ${small ? 'small' : ''}`} style={{ backgroundColor: color || '#007bff' }}>
+                    {initial}
+                    {isOnline && <span className="online-dot"></span>}
+                </div>
+            );
+        }
+        function PostsView({ user, posts }) {
+            const [content, setContent] = useState('');
+            const [loading, setLoading] = useState(false);
+            const [selectedImage, setSelectedImage] = useState(null);
+            const [imagePreview, setImagePreview] = useState(null);
+            const fileInputRef = useRef(null);
+            const handleImageSelect = (e) => {
+                const file = e.target.files[0];
+                if (file && file.type.startsWith('image/')) {
+                    setSelectedImage(file);
+                    const reader = new FileReader();
+                    reader.onload = (e) => setImagePreview(e.target.result);
+                    reader.readAsDataURL(file);
+                }
+            };
+            const removeImage = () => {
+                setSelectedImage(null);
+                setImagePreview(null);
+                if (fileInputRef.current) fileInputRef.current.value = '';
+            };
+            const uploadImage = async (file) => {
+                // Get presigned upload URL
+                const urlRes = await fetch(API_POSTS, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        action: 'getUploadUrl',
+                        fileName: file.name,
+                        contentType: file.type
+                    })
+                });
+                const { uploadUrl, publicUrl } = await urlRes.json();
+                // Upload to S3
+                await fetch(uploadUrl, {
+                    method: 'PUT',
+                    body: file,
+                    headers: { 'Content-Type': file.type }
+                });
+                return publicUrl;
+            };
+            const handleSubmit = async (e) => {
+                e.preventDefault();
+                if (!content.trim() && !selectedImage) return;
+                setLoading(true);
+                try {
+                    let imageUrl = null;
+                    if (selectedImage) {
+                        imageUrl = await uploadImage(selectedImage);
+                    }
+                    await fetch(API_POSTS, {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({
+                            action: 'create',
+                            content,
+                            imageUrl,
+                            userId: user.id,
+                            userName: user.name
+                        })
+                    });
+                    setContent('');
+                    removeImage();
+                } finally {
+                    setLoading(false);
+                }
+            };
+            return (
+                <div className="posts">
+                    <form className="post-form" onSubmit={handleSubmit}>
+                        <textarea
+                            placeholder="What's on your mind?"
+                            value={content}
+                            onChange={e => setContent(e.target.value)}
+                            rows={3}
+                        />
+                        <div className="image-upload">
+                            <input
+                                type="file"
+                                ref={fileInputRef}
+                                accept="image/*"
+                                onChange={handleImageSelect}
+                            />
+                            {!imagePreview && (
+                                <label className="upload-btn" onClick={() => fileInputRef.current?.click()}>
+                                    📷 Add Photo
+                                </label>
+                            )}
+                            {imagePreview && (
+                                <div className="image-preview">
+                                    <img src={imagePreview} alt="Preview" />
+                                    <button type="button" className="remove-btn" onClick={removeImage}>×</button>
+                                </div>
+                            )}
+                        </div>
+                        <div className="post-form-actions">
+                            <button type="submit" disabled={loading || (!content.trim() && !selectedImage)}>
+                                {loading ? 'Posting...' : 'Post'}
+                            </button>
+                        </div>
+                    </form>
+                    {posts.length === 0 ? (
+                        <div className="empty">No posts yet. Be the first!</div>
+                    ) : (
+                        posts.map(post => (
+                            <div key={post.id} className="post">
+                                <div className="post-header">
+                                    <Avatar name={post.userName} color="#007bff" small />
+                                    <div className="post-meta">
+                                        <div className="post-author">{post.userName}</div>
+                                        <div className="post-time">{timeAgo(post.createdAt)}</div>
+                                    </div>
+                                </div>
+                                <div className="post-content">{post.content}</div>
+                                {post.imageUrl && <img className="post-image" src={post.imageUrl} alt="" />}
+                            </div>
+                        ))
+                    )}
+                </div>
+            );
+        }
+        function ChatView({ user, selectedUser, messages, onSend }) {
+            const [input, setInput] = useState('');
+            const messagesEndRef = useRef(null);
+            useEffect(() => {
+                messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+            }, [messages]);
+            if (!selectedUser) {
+                return <div className="no-chat">Select a user to start chatting</div>;
+            }
+            const handleSubmit = (e) => {
+                e.preventDefault();
+                if (!input.trim()) return;
+                onSend(input);
+                setInput('');
+            };
+            return (
+                <div className="chat">
+                    <div className="chat-header">
+                        <Avatar name={selectedUser.name} color={selectedUser.avatarColor} />
+                        <div className="user-info">
+                            <div className="user-name">{selectedUser.name}</div>
+                        </div>
+                    </div>
+                    <div className="chat-messages">
+                        {messages.map((msg, i) => (
+                            <div key={msg.id || i} className={`message ${msg.fromUserId === user.id ? 'sent' : 'received'}`}>
+                                <div className="message-content">
+                                    <div className="message-bubble">{msg.content}</div>
+                                    <div className="message-time">{timeAgo(msg.createdAt)}</div>
+                                </div>
+                            </div>
+                        ))}
+                        <div ref={messagesEndRef} />
+                    </div>
+                    <form className="chat-input" onSubmit={handleSubmit}>
+                        <input
+                            type="text"
+                            placeholder="Type a message..."
+                            value={input}
+                            onChange={e => setInput(e.target.value)}
+                        />
+                        <button type="submit">Send</button>
+                    </form>
+                </div>
+            );
+        }
+        function AuthForm({ onLogin }) {
+            const [isRegister, setIsRegister] = useState(false);
+            const [name, setName] = useState('');
+            const [email, setEmail] = useState('');
+            const [password, setPassword] = useState('');
+            const [error, setError] = useState('');
+            const [loading, setLoading] = useState(false);
+            const handleSubmit = async (e) => {
+                e.preventDefault();
+                setError('');
+                setLoading(true);
+                try {
+                    const res = await fetch(API_AUTH, {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({
+                            action: isRegister ? 'register' : 'login',
+                            name, email, password
+                        })
+                    });
+                    const data = await res.json();
+                    if (data.error) {
+                        setError(data.error);
+                    } else if (data.user) {
+                        onLogin(data.user);
+                    }
+                } catch (err) {
+                    setError('Connection error');
+                } finally {
+                    setLoading(false);
+                }
+            };
+            return (
+                <div className="auth-container">
+                    <form className="auth-form" onSubmit={handleSubmit}>
+                        <h2>{isRegister ? 'Create Account' : 'Welcome Back'}</h2>
+                        {error && <div className="error">{error}</div>}
+                        {isRegister && (
+                            <input type="text" placeholder="Name" value={name} onChange={e => setName(e.target.value)} required />
+                        )}
+                        <input type="email" placeholder="Email" value={email} onChange={e => setEmail(e.target.value)} required />
+                        <input type="password" placeholder="Password" value={password} onChange={e => setPassword(e.target.value)} required />
+                        <button type="submit" disabled={loading}>
+                            {loading ? 'Loading...' : (isRegister ? 'Register' : 'Login')}
+                        </button>
+                        <div className="auth-toggle">
+                            {isRegister ? 'Already have an account? ' : "Don't have an account? "}
+                            <a onClick={() => setIsRegister(!isRegister)}>{isRegister ? 'Login' : 'Register'}</a>
+                        </div>
+                    </form>
+                </div>
+            );
+        }
+        function timeAgo(date) {
+            const seconds = Math.floor((new Date() - new Date(date)) / 1000);
+            if (seconds < 60) return 'just now';
+            if (seconds < 3600) return `${Math.floor(seconds / 60)}m ago`;
+            if (seconds < 86400) return `${Math.floor(seconds / 3600)}h ago`;
+            return new Date(date).toLocaleDateString();
+        }
+        ReactDOM.createRoot(document.getElementById('root')).render(<App />);
+    </script>
+</body>
+</html>

package/templates/.claude/skills/openkbs/examples/nodejs-demo/site/settings.json ADDED Viewed

@@ -0,0 +1,4 @@
+{
+  "kbId": "abcdef123456",
+  "region": "us-east-1"
+}