@nextclaw/ui 0.3.15 → 0.3.17

package/src/components/doc-browser/DocBrowser.tsx

@@ -0,0 +1,272 @@
+import { useState, useRef, useCallback, useEffect } from 'react';
+import { DOCS_DEFAULT_BASE_URL, useDocBrowser } from './DocBrowserContext';
+import { cn } from '@/lib/utils';
+import { t } from '@/lib/i18n';
+import {
+    ArrowLeft,
+    ArrowRight,
+    X,
+    ExternalLink,
+    PanelRightOpen,
+    Maximize2,
+    GripVertical,
+    Search,
+    BookOpen,
+} from 'lucide-react';
+
+/**
+ * DocBrowser — An in-app micro-browser for documentation.
+ * 
+ * Supports two modes:
+ * - `docked`: Renders as a right sidebar panel (horizontally resizable)
+ * - `floating`: Renders as a draggable, resizable overlay
+ */
+export function DocBrowser() {
+    const {
+        isOpen, mode, currentUrl,
+        close, toggleMode,
+        goBack, goForward, canGoBack, canGoForward,
+        navigate,
+    } = useDocBrowser();
+
+    const [urlInput, setUrlInput] = useState('');
+    const [isDragging, setIsDragging] = useState(false);
+    const [floatPos, setFloatPos] = useState({ x: 120, y: 80 });
+    const [floatSize, setFloatSize] = useState({ w: 480, h: 600 });
+    const [dockedWidth, setDockedWidth] = useState(420);
+    const dragRef = useRef<{ startX: number; startY: number; startPosX: number; startPosY: number } | null>(null);
+    const resizeRef = useRef<{ startX: number; startY: number; startW: number; startH: number } | null>(null);
+    const dockResizeRef = useRef<{ startX: number; startW: number } | null>(null);
+
+    // Sync URL input with current URL
+    useEffect(() => {
+        try {
+            const parsed = new URL(currentUrl);
+            setUrlInput(parsed.pathname);
+        } catch {
+            setUrlInput(currentUrl);
+        }
+    }, [currentUrl]);
+
+    const handleUrlSubmit = useCallback((e: React.FormEvent) => {
+        e.preventDefault();
+        const input = urlInput.trim();
+        if (!input) return;
+        if (input.startsWith('/')) {
+            navigate(`${DOCS_DEFAULT_BASE_URL}${input}`);
+        } else if (input.startsWith('http')) {
+            navigate(input);
+        } else {
+            navigate(`${DOCS_DEFAULT_BASE_URL}/${input}`);
+        }
+    }, [urlInput, navigate]);
+
+    // --- Dragging logic (floating mode) ---
+    const onDragStart = useCallback((e: React.MouseEvent) => {
+        if (mode !== 'floating') return;
+        setIsDragging(true);
+        dragRef.current = {
+            startX: e.clientX,
+            startY: e.clientY,
+            startPosX: floatPos.x,
+            startPosY: floatPos.y,
+        };
+    }, [mode, floatPos]);
+
+    useEffect(() => {
+        if (!isDragging) return;
+        const onMove = (e: MouseEvent) => {
+            if (!dragRef.current) return;
+            setFloatPos({
+                x: dragRef.current.startPosX + (e.clientX - dragRef.current.startX),
+                y: dragRef.current.startPosY + (e.clientY - dragRef.current.startY),
+            });
+        };
+        const onUp = () => {
+            setIsDragging(false);
+            dragRef.current = null;
+        };
+        window.addEventListener('mousemove', onMove);
+        window.addEventListener('mouseup', onUp);
+        return () => {
+            window.removeEventListener('mousemove', onMove);
+            window.removeEventListener('mouseup', onUp);
+        };
+    }, [isDragging]);
+
+    // --- Resize logic (floating mode — bottom-right corner) ---
+    const onResizeStart = useCallback((e: React.MouseEvent) => {
+        e.preventDefault();
+        e.stopPropagation();
+        resizeRef.current = {
+            startX: e.clientX,
+            startY: e.clientY,
+            startW: floatSize.w,
+            startH: floatSize.h,
+        };
+        const onMove = (ev: MouseEvent) => {
+            if (!resizeRef.current) return;
+            setFloatSize({
+                w: Math.max(360, resizeRef.current.startW + (ev.clientX - resizeRef.current.startX)),
+                h: Math.max(400, resizeRef.current.startH + (ev.clientY - resizeRef.current.startY)),
+            });
+        };
+        const onUp = () => {
+            resizeRef.current = null;
+            window.removeEventListener('mousemove', onMove);
+            window.removeEventListener('mouseup', onUp);
+        };
+        window.addEventListener('mousemove', onMove);
+        window.addEventListener('mouseup', onUp);
+    }, [floatSize]);
+
+    // --- Horizontal resize logic (docked mode — left edge) ---
+    const onDockResizeStart = useCallback((e: React.MouseEvent) => {
+        e.preventDefault();
+        e.stopPropagation();
+        dockResizeRef.current = { startX: e.clientX, startW: dockedWidth };
+        const onMove = (ev: MouseEvent) => {
+            if (!dockResizeRef.current) return;
+            // Dragging left should increase width (since resize handle is on the left edge)
+            const delta = dockResizeRef.current.startX - ev.clientX;
+            setDockedWidth(Math.max(320, Math.min(800, dockResizeRef.current.startW + delta)));
+        };
+        const onUp = () => {
+            dockResizeRef.current = null;
+            window.removeEventListener('mousemove', onMove);
+            window.removeEventListener('mouseup', onUp);
+        };
+        window.addEventListener('mousemove', onMove);
+        window.addEventListener('mouseup', onUp);
+    }, [dockedWidth]);
+
+    if (!isOpen) return null;
+
+    const isDocked = mode === 'docked';
+
+    const panel = (
+        <div
+            className={cn(
+                'flex flex-col bg-white overflow-hidden relative',
+                isDocked
+                    ? 'h-full border-l border-gray-200 shrink-0'
+                    : 'rounded-2xl shadow-2xl border border-gray-200',
+            )}
+            style={
+                isDocked
+                    ? { width: dockedWidth }
+                    : {
+                        position: 'fixed',
+                        left: floatPos.x,
+                        top: floatPos.y,
+                        width: floatSize.w,
+                        height: floatSize.h,
+                        zIndex: 9999,
+                    }
+            }
+        >
+            {/* Docked mode: left-edge resize handle */}
+            {isDocked && (
+                <div
+                    className="absolute top-0 left-0 w-1.5 h-full cursor-ew-resize z-20 hover:bg-primary/10 transition-colors"
+                    onMouseDown={onDockResizeStart}
+                />
+            )}
+
+            {/* Title Bar */}
+            <div
+                className={cn(
+                    'flex items-center justify-between px-4 py-2.5 bg-gray-50 border-b border-gray-200 shrink-0 select-none',
+                    !isDocked && 'cursor-grab active:cursor-grabbing',
+                )}
+                onMouseDown={!isDocked ? onDragStart : undefined}
+            >
+                <div className="flex items-center gap-2.5">
+                    <BookOpen className="w-4 h-4 text-primary" />
+                    <span className="text-sm font-semibold text-gray-900">{t('docBrowserTitle')}</span>
+                </div>
+                <div className="flex items-center gap-1">
+                    <button
+                        onClick={toggleMode}
+                        className="hover:bg-gray-200 rounded-md p-1.5 text-gray-500 hover:text-gray-700 transition-colors"
+                        title={isDocked ? t('docBrowserFloatMode') : t('docBrowserDockMode')}
+                    >
+                        {isDocked ? <Maximize2 className="w-3.5 h-3.5" /> : <PanelRightOpen className="w-3.5 h-3.5" />}
+                    </button>
+                    <button
+                        onClick={close}
+                        className="hover:bg-gray-200 rounded-md p-1.5 text-gray-500 hover:text-gray-700 transition-colors"
+                        title={t('docBrowserClose')}
+                    >
+                        <X className="w-3.5 h-3.5" />
+                    </button>
+                </div>
+            </div>
+
+            {/* Navigation Bar */}
+            <div className="flex items-center gap-2 px-3.5 py-2 bg-white border-b border-gray-100 shrink-0">
+                <button
+                    onClick={goBack}
+                    disabled={!canGoBack}
+                    className="p-1.5 rounded-md hover:bg-gray-100 disabled:opacity-30 disabled:cursor-not-allowed text-gray-600 transition-colors"
+                >
+                    <ArrowLeft className="w-4 h-4" />
+                </button>
+                <button
+                    onClick={goForward}
+                    disabled={!canGoForward}
+                    className="p-1.5 rounded-md hover:bg-gray-100 disabled:opacity-30 disabled:cursor-not-allowed text-gray-600 transition-colors"
+                >
+                    <ArrowRight className="w-4 h-4" />
+                </button>
+
+                <form onSubmit={handleUrlSubmit} className="flex-1 relative">
+                    <Search className="w-3.5 h-3.5 absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
+                    <input
+                        type="text"
+                        value={urlInput}
+                        onChange={(e) => setUrlInput(e.target.value)}
+                        placeholder={t('docBrowserSearchPlaceholder')}
+                        className="w-full h-8 pl-8 pr-3 rounded-lg bg-gray-50 border border-gray-200 text-xs text-gray-700 focus:outline-none focus:ring-1 focus:ring-primary/30 focus:border-primary/40 transition-colors placeholder:text-gray-400"
+                    />
+                </form>
+            </div>
+
+            {/* Iframe Content */}
+            <div className="flex-1 relative overflow-hidden">
+                <iframe
+                    src={currentUrl}
+                    className="absolute inset-0 w-full h-full border-0"
+                    title="NextClaw Documentation"
+                    sandbox="allow-same-origin allow-scripts allow-popups allow-forms"
+                    allow="clipboard-read; clipboard-write"
+                />
+            </div>
+
+            {/* Footer */}
+            <div className="flex items-center justify-between px-4 py-2 bg-gray-50 border-t border-gray-200 shrink-0">
+                <a
+                    href={currentUrl}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="flex items-center gap-1.5 text-xs text-primary hover:text-primary-hover font-medium transition-colors"
+                >
+                    {t('docBrowserOpenExternal')}
+                    <ExternalLink className="w-3 h-3" />
+                </a>
+            </div>
+
+            {/* Resize Handle (floating only — bottom-right corner) */}
+            {!isDocked && (
+                <div
+                    className="absolute bottom-0 right-0 w-5 h-5 cursor-se-resize flex items-center justify-center text-gray-300 hover:text-gray-500 transition-colors"
+                    onMouseDown={onResizeStart}
+                >
+                    <GripVertical className="w-3 h-3 rotate-[-45deg]" />
+                </div>
+            )}
+        </div>
+    );
+
+    return panel;
+}

package/src/components/doc-browser/DocBrowserContext.tsx

@@ -0,0 +1,134 @@
+import { createContext, useCallback, useContext, useMemo, useState, type ReactNode } from 'react';
+
+const DOCS_PRIMARY_DOMAIN = 'docs.nextclaw.io';
+const DOCS_FALLBACK_DOMAIN = 'nextclaw-docs.pages.dev';
+const DOCS_HOSTS = new Set([
+    DOCS_PRIMARY_DOMAIN,
+    `www.${DOCS_PRIMARY_DOMAIN}`,
+    DOCS_FALLBACK_DOMAIN,
+    `www.${DOCS_FALLBACK_DOMAIN}`,
+]);
+
+export const DOCS_DEFAULT_BASE_URL = `https://${DOCS_FALLBACK_DOMAIN}`;
+
+export type DocBrowserMode = 'floating' | 'docked';
+
+interface DocBrowserState {
+    isOpen: boolean;
+    mode: DocBrowserMode;
+    currentUrl: string;
+    history: string[];
+    historyIndex: number;
+}
+
+interface DocBrowserActions {
+    open: (url?: string) => void;
+    close: () => void;
+    toggleMode: () => void;
+    setMode: (mode: DocBrowserMode) => void;
+    navigate: (url: string) => void;
+    goBack: () => void;
+    goForward: () => void;
+    canGoBack: boolean;
+    canGoForward: boolean;
+}
+
+type DocBrowserContextValue = DocBrowserState & DocBrowserActions;
+
+const DocBrowserContext = createContext<DocBrowserContextValue | null>(null);
+
+export function useDocBrowser(): DocBrowserContextValue {
+    const ctx = useContext(DocBrowserContext);
+    if (!ctx) throw new Error('useDocBrowser must be used within DocBrowserProvider');
+    return ctx;
+}
+
+/** Check if a URL belongs to the docs domain */
+export function isDocsUrl(url: string): boolean {
+    try {
+        const parsed = new URL(url, window.location.origin);
+        return DOCS_HOSTS.has(parsed.hostname);
+    } catch {
+        return false;
+    }
+}
+
+export function DocBrowserProvider({ children }: { children: ReactNode }) {
+    const [state, setState] = useState<DocBrowserState>({
+        isOpen: false,
+        mode: 'docked',
+        currentUrl: `${DOCS_DEFAULT_BASE_URL}/guide/getting-started`,
+        history: [`${DOCS_DEFAULT_BASE_URL}/guide/getting-started`],
+        historyIndex: 0,
+    });
+
+    const open = useCallback((url?: string) => {
+        const targetUrl = url || state.currentUrl || `${DOCS_DEFAULT_BASE_URL}/guide/getting-started`;
+        setState(prev => ({
+            ...prev,
+            isOpen: true,
+            currentUrl: targetUrl,
+            history: [...prev.history.slice(0, prev.historyIndex + 1), targetUrl],
+            historyIndex: prev.historyIndex + 1,
+        }));
+    }, [state.currentUrl]);
+
+    const close = useCallback(() => {
+        setState(prev => ({ ...prev, isOpen: false }));
+    }, []);
+
+    const toggleMode = useCallback(() => {
+        setState(prev => ({ ...prev, mode: prev.mode === 'floating' ? 'docked' : 'floating' }));
+    }, []);
+
+    const setMode = useCallback((mode: DocBrowserMode) => {
+        setState(prev => ({ ...prev, mode }));
+    }, []);
+
+    const navigate = useCallback((url: string) => {
+        setState(prev => ({
+            ...prev,
+            currentUrl: url,
+            history: [...prev.history.slice(0, prev.historyIndex + 1), url],
+            historyIndex: prev.historyIndex + 1,
+        }));
+    }, []);
+
+    const goBack = useCallback(() => {
+        setState(prev => {
+            if (prev.historyIndex <= 0) return prev;
+            const newIndex = prev.historyIndex - 1;
+            return { ...prev, historyIndex: newIndex, currentUrl: prev.history[newIndex] };
+        });
+    }, []);
+
+    const goForward = useCallback(() => {
+        setState(prev => {
+            if (prev.historyIndex >= prev.history.length - 1) return prev;
+            const newIndex = prev.historyIndex + 1;
+            return { ...prev, historyIndex: newIndex, currentUrl: prev.history[newIndex] };
+        });
+    }, []);
+
+    const canGoBack = state.historyIndex > 0;
+    const canGoForward = state.historyIndex < state.history.length - 1;
+
+    const value = useMemo<DocBrowserContextValue>(() => ({
+        ...state,
+        open,
+        close,
+        toggleMode,
+        setMode,
+        navigate,
+        goBack,
+        goForward,
+        canGoBack,
+        canGoForward,
+    }), [state, open, close, toggleMode, setMode, navigate, goBack, goForward, canGoBack, canGoForward]);
+
+    return (
+        <DocBrowserContext.Provider value={value}>
+            {children}
+        </DocBrowserContext.Provider>
+    );
+}

package/src/components/doc-browser/index.ts

@@ -0,0 +1,3 @@
+export { DocBrowser } from './DocBrowser';
+export { DocBrowserProvider, useDocBrowser, isDocsUrl } from './DocBrowserContext';
+export { useDocLinkInterceptor } from './useDocLinkInterceptor';

package/src/components/doc-browser/useDocLinkInterceptor.ts

@@ -0,0 +1,33 @@
+import { useEffect } from 'react';
+import { isDocsUrl, useDocBrowser } from './DocBrowserContext';
+
+/**
+ * Global click interceptor for docs links.
+ * Captures clicks on <a> tags pointing to the docs domain
+ * and opens them in the in-app micro-browser instead.
+ */
+export function useDocLinkInterceptor() {
+    const docBrowser = useDocBrowser();
+
+    useEffect(() => {
+        const handler = (e: MouseEvent) => {
+            // Walk up from the click target to find an anchor
+            const anchor = (e.target as HTMLElement).closest<HTMLAnchorElement>('a[href]');
+            if (!anchor) return;
+
+            const href = anchor.getAttribute('href') || '';
+            if (!isDocsUrl(href)) return;
+
+            // Don't intercept if modifier keys are held (user wants new tab behavior)
+            if (e.ctrlKey || e.metaKey || e.shiftKey) return;
+
+            e.preventDefault();
+            e.stopPropagation();
+            docBrowser.open(href);
+        };
+
+        // Use capture phase to intercept before React's synthetic events
+        document.addEventListener('click', handler, true);
+        return () => document.removeEventListener('click', handler, true);
+    }, [docBrowser]);
+}

package/src/components/layout/AppLayout.tsx

@@ -1,20 +1,37 @@
 import { Sidebar } from './Sidebar';
+import { DocBrowserProvider, DocBrowser, useDocBrowser, useDocLinkInterceptor } from '@/components/doc-browser';
 
 interface AppLayoutProps {
   children: React.ReactNode;
 }
 
-export function AppLayout({ children }: AppLayoutProps) {
+function AppLayoutInner({ children }: AppLayoutProps) {
+  const { isOpen, mode } = useDocBrowser();
+  useDocLinkInterceptor();
+
   return (
-    <div className="h-screen flex bg-[hsl(40,20%,98%)] p-2">
+    <div className="h-screen flex bg-white font-sans text-foreground">
       <Sidebar />
-      <div className="flex-1 flex flex-col min-w-0 bg-white rounded-[2rem] shadow-sm overflow-hidden border border-[hsl(40,10%,94%)]">
-        <main className="flex-1 overflow-auto custom-scrollbar p-8">
-          <div className="max-w-6xl mx-auto animate-fade-in h-full">
-            {children}
-          </div>
-        </main>
+      <div className="flex-1 flex min-w-0 overflow-hidden relative">
+        <div className="flex-1 flex flex-col min-w-0 bg-gray-50 overflow-hidden">
+          <main className="flex-1 overflow-auto custom-scrollbar p-10">
+            <div className="max-w-6xl mx-auto animate-fade-in h-full">
+              {children}
+            </div>
+          </main>
+        </div>
+        {/* Doc Browser: docked mode renders inline, floating mode renders as overlay */}
+        {isOpen && mode === 'docked' && <DocBrowser />}
       </div>
+      {isOpen && mode === 'floating' && <DocBrowser />}
     </div>
   );
 }
+
+export function AppLayout({ children }: AppLayoutProps) {
+  return (
+    <DocBrowserProvider>
+      <AppLayoutInner>{children}</AppLayoutInner>
+    </DocBrowserProvider>
+  );
+}

package/src/components/layout/Sidebar.tsx

@@ -1,7 +1,8 @@
 import { cn } from '@/lib/utils';
 import { t } from '@/lib/i18n';
-import { Cpu, GitBranch, History, MessageSquare, Sparkles } from 'lucide-react';
+import { Cpu, GitBranch, History, MessageSquare, Sparkles, BookOpen, Store } from 'lucide-react';
 import { NavLink } from 'react-router-dom';
+import { useDocBrowser } from '@/components/doc-browser';
 
 const navItems = [
   {
@@ -28,12 +29,19 @@ const navItems = [
     target: '/sessions',
     label: t('sessions'),
     icon: History,
+  },
+  {
+    target: '/marketplace',
+    label: 'Marketplace',
+    icon: Store,
   }
 ];
 
 export function Sidebar() {
+  const docBrowser = useDocBrowser();
+
   return (
-    <aside className="w-[240px] bg-transparent flex flex-col h-full py-6 px-4">
+    <aside className="w-[240px] bg-white border-r border-gray-200 flex flex-col h-full py-6 px-4">
       {/* Logo Area */}
       <div className="px-3 mb-8">
         <div className="flex items-center gap-2.5 group cursor-pointer">
@@ -55,10 +63,10 @@ export function Sidebar() {
                 <NavLink
                   to={item.target}
                   className={({ isActive }) => cn(
-                    'group w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-all duration-fast',
+                    'group w-full flex items-center gap-3 px-4 py-2.5 rounded-lg text-sm font-medium transition-all duration-base',
                     isActive
-                      ? 'bg-primary-100 text-primary-700'
-                      : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900'
+                      ? 'bg-brand-50 text-brand-700'
+                      : 'text-gray-600 hover:bg-gray-100/80 hover:text-gray-900'
                   )}
                 >
                   {({ isActive }) => (
@@ -76,6 +84,25 @@ export function Sidebar() {
           })}
         </ul>
       </nav>
+
+      {/* Help Button */}
+      <div className="pt-2 border-t border-gray-100 mt-2">
+        <button
+          onClick={() => docBrowser.open()}
+          className={cn(
+            'w-full flex items-center gap-3 px-4 py-2.5 rounded-lg text-sm font-medium transition-all duration-base',
+            docBrowser.isOpen
+              ? 'bg-brand-50 text-brand-700'
+              : 'text-gray-600 hover:bg-gray-100/80 hover:text-gray-900'
+          )}
+        >
+          <BookOpen className={cn(
+            'h-4 w-4',
+            docBrowser.isOpen ? 'text-primary' : 'text-gray-500'
+          )} />
+          <span className="flex-1 text-left">{t('docBrowserHelp')}</span>
+        </button>
+      </div>
     </aside>
   );
 }