@geenius/tools 0.1.0

package/packages/convex/shared/src/utils.ts

@@ -0,0 +1,58 @@
+// @geenius-tools/convex-wrappers — src/utils.ts
+
+/**
+ * Generate a unique request ID for tracing.
+ */
+export function makeRequestId(): string {
+    const timestamp = Date.now().toString(36)
+    const random = Math.random().toString(36).substring(2, 8)
+    return `req_${timestamp}_${random}`
+}
+
+/**
+ * Redact sensitive fields from an object for logging.
+ */
+export function redactForLogging(
+    args: Record<string, unknown>,
+    config: { sensitiveFields?: string[] },
+): Record<string, unknown> {
+    const sensitiveFields = new Set(
+        config.sensitiveFields ?? ['password', 'token', 'secret', 'apiKey', 'accessToken'],
+    )
+
+    const result: Record<string, unknown> = {}
+    for (const [key, value] of Object.entries(args)) {
+        if (sensitiveFields.has(key)) {
+            result[key] = '[REDACTED]'
+        } else {
+            result[key] = value
+        }
+    }
+    return result
+}
+
+/**
+ * Extract userId from args (for trusted internal calls).
+ * Throws if userId is missing.
+ */
+export function extractRequiredUserId(
+    args: Record<string, unknown>,
+    context: string,
+): string {
+    const userId = args.userId
+    if (!userId || typeof userId !== 'string') {
+        throw new Error(`Missing userId in ${context}`)
+    }
+    return userId
+}
+
+/**
+ * Extract optional userId from args.
+ */
+export function extractOptionalUserId(
+    args: Record<string, unknown>,
+): string | undefined {
+    const userId = args.userId
+    if (!userId || typeof userId !== 'string') return undefined
+    return userId
+}

package/packages/convex/shared/tsconfig.json

@@ -0,0 +1,28 @@
+{
+    "compilerOptions": {
+        "target": "ES2022",
+        "module": "ESNext",
+        "moduleResolution": "bundler",
+        "lib": [
+            "ES2022"
+        ],
+        "strict": true,
+        "esModuleInterop": true,
+        "skipLibCheck": true,
+        "forceConsistentCasingInFileNames": true,
+        "resolveJsonModule": true,
+        "isolatedModules": true,
+        "declaration": true,
+        "declarationMap": true,
+        "sourceMap": true,
+        "outDir": "./dist",
+        "rootDir": "./src"
+    },
+    "include": [
+        "src"
+    ],
+    "exclude": [
+        "node_modules",
+        "dist"
+    ]
+}

package/packages/convex/shared/tsup.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from 'tsup'
+
+export default defineConfig({
+    entry: { index: 'src/index.ts' },
+    outDir: 'dist',
+    format: ['esm'],
+    dts: true,
+    sourcemap: true,
+    clean: true,
+    treeshake: true,
+    external: ['convex'],
+})

package/packages/devtools/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@geenius-tools/devtools",
+  "version": "0.1.0",
+  "type": "module",
+  "description": "Development tooling utilities for Geenius projects",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "scripts": {
+    "build": "tsup",
+    "type-check": "tsc --noEmit",
+    "clean": "rm -rf dist .turbo"
+  },
+  "devDependencies": {
+    "typescript": "~6.0.2",
+    "tsup": "^8.0.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT"
+}

package/packages/devtools/react/README.md

@@ -0,0 +1 @@
+# ✦ @geenius-tools/devtools-react\n\n> React dev-tools UI — floating toolbar, performance panel, inspector, GitHub issues\n\n---\n\n## Overview\nBuilt with Steve Jobs-level minimalism and Jony Ive-level craftsmanship, this package is designed to deliver unparalleled developer experience (DX) and rock-solid performance.\n\n## Installation\n\n```bash\npnpm add @geenius-tools/devtools-react\n```\n\n## Usage\n\n```typescript\nimport { init } from '@geenius-tools/devtools-react';\n\n// Initialize the module with absolute precision\ninit({\n  mode: 'premium',\n});\n```\n\n## Architecture\n- **Zero-config**: It just works.\n- **Strictly Typed**: Fully written in TypeScript for flawless IntelliSense.\n- **Framework Agnostic**: seamlessly integrates into the Geenius ecosystem.\n\n---\n\n*Designed by Antigravity HQ*\n

package/packages/devtools/react/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@geenius-tools/devtools-react",
+  "version": "0.1.0",
+  "private": false,
+  "type": "module",
+  "description": "React dev-tools UI — floating toolbar, performance panel, inspector, GitHub issues",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "clean": "rm -rf dist",
+    "type-check": "tsc --noEmit",
+    "prepublishOnly": "pnpm clean && pnpm build"
+  },
+  "dependencies": {
+    "@geenius-tools/logger": "workspace:*"
+  },
+  "devDependencies": {
+    "@geenius-ui/react": "workspace:*",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "lucide-react": "^0.577.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "tsup": "^8.5.1",
+    "typescript": "~5.9.3"
+  },
+  "peerDependencies": {
+    "@geenius-ui/react": "workspace:*",
+    "lucide-react": ">=0.300.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "author": "Antigravity HQ",
+  "engines": {
+    "node": ">=20.0.0"
+  }
+}

package/packages/devtools/react/src/components/DesignPreview.tsx

@@ -0,0 +1,59 @@
+// @geenius-tools/devtools-react — components/DesignPreview.tsx
+import { useRef, useEffect } from 'react'
+import type { Design } from '../data/designs'
+
+export type DesignPreviewProps = {
+    designNumber: number
+    showGrid?: boolean
+    theme?: 'light' | 'dark'
+}
+
+/**
+ * DesignPreview — renders an HTML design file in an iframe with grid overlay + theme control.
+ *
+ * Uses Tailwind CSS utility classes.
+ */
+export function DesignPreview({
+    designNumber,
+    showGrid = false,
+    theme = 'light',
+}: DesignPreviewProps) {
+    const iframeRef = useRef<HTMLIFrameElement>(null)
+
+    const applyTheme = () => {
+        try {
+            const iframe = iframeRef.current
+            if (iframe?.contentDocument) {
+                const action = theme === 'dark' ? 'add' : 'remove'
+                iframe.contentDocument.documentElement.classList[action]('dark')
+                iframe.contentDocument.body?.classList[action]('dark')
+            }
+        } catch {
+            // Cross-origin restrictions
+        }
+    }
+
+    useEffect(applyTheme, [theme, designNumber])
+
+    return (
+        <div className="relative w-full h-screen">
+            {showGrid && (
+                <div className="absolute inset-0 pointer-events-none z-[100] flex justify-between px-4 max-w-[1400px] mx-auto w-full">
+                    {Array.from({ length: 12 }).map((_, i) => (
+                        <div
+                            key={i}
+                            className="h-full w-[calc(100%/12)] border-x border-red-500/20 bg-red-500/5 mx-2"
+                        />
+                    ))}
+                </div>
+            )}
+            <iframe
+                ref={iframeRef}
+                src={`/designs/design-${designNumber}.html`}
+                className="w-full h-full border-0"
+                title={`Design ${designNumber} Preview`}
+                onLoad={applyTheme}
+            />
+        </div>
+    )
+}

package/packages/devtools/react/src/components/DesignSwitcherDropdown.tsx

@@ -0,0 +1,99 @@
+// @geenius-tools/devtools-react — components/DesignSwitcherDropdown.tsx
+import { useState, useRef, useEffect } from 'react'
+
+export type DesignSwitcherDropdownProps = {
+    /** Current active path — used to highlight the active design */
+    currentPath: string
+    /** Called when user selects a design */
+    onNavigate: (path: string) => void
+    /** Total number of designs */
+    designCount?: number
+}
+
+/**
+ * DesignSwitcherDropdown — dropdown menu for switching between design previews.
+ *
+ * Router-agnostic: caller provides currentPath and onNavigate.
+ * Uses Tailwind CSS utility classes.
+ */
+export function DesignSwitcherDropdown({
+    currentPath,
+    onNavigate,
+    designCount = 21,
+}: DesignSwitcherDropdownProps) {
+    const [isOpen, setIsOpen] = useState(false)
+    const dropdownRef = useRef<HTMLDivElement>(null)
+
+    const getCurrentDesign = () => {
+        const match = currentPath.match(/\/dev\/design\/(\d+)/)
+        return match ? `Design ${match[1]}` : 'Current Design'
+    }
+
+    const currentDesign = getCurrentDesign()
+
+    useEffect(() => {
+        const handleClickOutside = (event: MouseEvent) => {
+            if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+                setIsOpen(false)
+            }
+        }
+        document.addEventListener('mousedown', handleClickOutside)
+        return () => document.removeEventListener('mousedown', handleClickOutside)
+    }, [])
+
+    const handleDesignChange = (path: string) => {
+        onNavigate(path)
+        setIsOpen(false)
+    }
+
+    const designs = [
+        { label: 'Current Design', path: '/' },
+        ...Array.from({ length: designCount }, (_, i) => ({
+            label: `Design ${i + 1}`,
+            path: `/dev/design/${i + 1}`,
+        })),
+    ]
+
+    return (
+        <div ref={dropdownRef} className="relative">
+            <button
+                type="button"
+                onClick={() => setIsOpen(!isOpen)}
+                aria-label="Switch Design"
+                className="flex items-center gap-2 px-3 py-2 rounded-lg text-foreground hover:bg-bg-muted transition-colors text-sm font-medium"
+            >
+                <svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}><circle cx="13.5" cy="6.5" r="0.5" /><circle cx="17.5" cy="10.5" r="0.5" /><circle cx="8.5" cy="7.5" r="0.5" /><circle cx="6.5" cy="12" r="0.5" /><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z" /></svg>
+                <span className="hidden sm:inline">{currentDesign}</span>
+                <svg
+                    className={`w-4 h-4 transition-transform duration-200 ${isOpen ? 'rotate-180' : ''}`}
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                >
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+                </svg>
+            </button>
+
+            {isOpen && (
+                <div className="absolute right-0 mt-2 py-2 bg-card border border-border rounded-lg shadow-xl overflow-hidden min-w-[180px] max-h-[400px] overflow-y-auto z-50">
+                    {designs.map((design) => (
+                        <button
+                            key={design.path}
+                            type="button"
+                            onClick={() => handleDesignChange(design.path)}
+                            className={`w-full px-4 py-2.5 text-left text-sm transition-colors ${currentDesign === design.label
+                                ? 'bg-primary/10 text-primary font-medium'
+                                : 'hover:bg-bg-muted text-foreground'
+                                }`}
+                        >
+                            {design.label}
+                            {currentDesign === design.label && (
+                                <span className="ml-2 text-primary">✓</span>
+                            )}
+                        </button>
+                    ))}
+                </div>
+            )}
+        </div>
+    )
+}

package/packages/devtools/react/src/components/DevSidebar.tsx

@@ -0,0 +1,247 @@
+// @geenius-tools/devtools-react — src/components/DevSidebar.tsx
+
+import { memo, useState, useEffect, useMemo } from 'react'
+import { cn } from '@geenius-ui/react'
+import {
+    Bug,
+    Lightbulb,
+    ExternalLink,
+    Clock,
+    X,
+    RefreshCw,
+    Maximize2,
+    Minimize2,
+} from 'lucide-react'
+import { useDevModeOptional } from '../context/DevModeContext'
+import {
+    getGitHubIssues,
+    getGitHubConfig,
+    getIssueType,
+    formatRelativeTime,
+    type GitHubIssueListItem,
+} from '../services/github-service'
+
+interface IssueCardProps {
+    issue: GitHubIssueListItem
+    expandedView: boolean
+}
+
+const IssueCard = memo(function IssueCard({
+    issue,
+    expandedView,
+}: IssueCardProps) {
+    const issueType = getIssueType(issue)
+
+    const linkedComponent = useMemo(() => {
+        if (!issue.body) return null
+        const match = issue.body.match(/\*\*Name:\*\*\s*`([^`]+)`/)
+        return match ? match[1] : null
+    }, [issue.body])
+
+    return (
+        <a
+            href={issue.html_url}
+            target="_blank"
+            rel="noopener noreferrer"
+            className={cn(
+                'block p-3 rounded-lg border transition-all duration-200',
+                'hover:bg-white/5 hover:border-white/20',
+                'border-white/10 bg-white/[0.02]',
+            )}
+        >
+            <div className="flex items-start gap-3">
+                <div
+                    className={cn(
+                        'flex-shrink-0 w-8 h-8 rounded-lg flex items-center justify-center',
+                        issueType === 'bug' && 'bg-red-500/10 text-red-500',
+                        issueType === 'feature' && 'bg-emerald-500/10 text-emerald-500',
+                        issueType === 'other' && 'bg-blue-500/10 text-blue-500',
+                    )}
+                >
+                    {issueType === 'bug' ? (
+                        <Bug className="w-4 h-4" />
+                    ) : (
+                        <Lightbulb className="w-4 h-4" />
+                    )}
+                </div>
+
+                <div className="flex-1 min-w-0">
+                    <p className="font-medium text-sm text-white line-clamp-2">
+                        {issue.title}
+                    </p>
+
+                    {linkedComponent && (
+                        <span className="inline-flex items-center gap-1 mt-1 text-[10px] px-1.5 py-0.5 bg-white/5 border border-white/10 rounded text-white/60">
+                            {linkedComponent}
+                        </span>
+                    )}
+
+                    <div className="flex items-center gap-3 mt-2 text-xs text-white/40">
+                        <span>#{issue.number}</span>
+                        <span className="flex items-center gap-1">
+                            <Clock className="w-3 h-3" />
+                            {formatRelativeTime(issue.updated_at)}
+                        </span>
+                    </div>
+
+                    {expandedView && issue.body && (
+                        <div className="mt-3 text-xs text-white/40 border-l-2 border-white/10 pl-2 line-clamp-6 whitespace-pre-line font-mono bg-white/[0.02] p-2 rounded-sm">
+                            {issue.body.substring(0, 300)}
+                            {issue.body.length > 300 ? '...' : ''}
+                        </div>
+                    )}
+                </div>
+                <ExternalLink className="w-4 h-4 text-white/30 flex-shrink-0" />
+            </div>
+        </a>
+    )
+})
+
+export const DevSidebar = memo(function DevSidebar() {
+    const devMode = useDevModeOptional()
+    const [issues, setIssues] = useState<GitHubIssueListItem[]>([])
+    const [loading, setLoading] = useState(false)
+    const [tab, setTab] = useState<'bugs' | 'features'>('bugs')
+    const [isExpanded, setIsExpanded] = useState(false)
+
+    const isSidebarOpen = devMode?.isSidebarOpen ?? false
+    const setSidebarOpen = devMode?.setSidebarOpen ?? (() => { })
+
+    useEffect(() => {
+        if (isSidebarOpen && issues.length === 0 && !loading) {
+            fetchIssues()
+        }
+    }, [isSidebarOpen])
+
+    const fetchIssues = async () => {
+        setLoading(true)
+        try {
+            const result = await getGitHubIssues('all', 'open')
+            setIssues(result)
+        } catch {
+            // Silently fail
+        } finally {
+            setLoading(false)
+        }
+    }
+
+    const handleRefresh = () => fetchIssues()
+    const toggleExpand = () => setIsExpanded((prev) => !prev)
+
+    const { bugs, features } = useMemo(() => {
+        const bugs: GitHubIssueListItem[] = []
+        const features: GitHubIssueListItem[] = []
+
+        issues.forEach((issue) => {
+            const type = getIssueType(issue)
+            if (type === 'bug') bugs.push(issue)
+            else features.push(issue)
+        })
+
+        return { bugs, features }
+    }, [issues])
+
+    const currentIssues = tab === 'bugs' ? bugs : features
+
+    if (!devMode || !isSidebarOpen) return null
+
+    const config = getGitHubConfig()
+
+    return (
+        <div
+            data-dev-tool="true"
+            className={cn(
+                'fixed top-0 right-0 h-full z-50',
+                'flex flex-col',
+                'bg-gradient-to-b from-slate-900/98 to-slate-950/98',
+                'backdrop-blur-xl border-l border-white/10',
+                'shadow-2xl shadow-black/50',
+                'transition-all duration-300 ease-in-out',
+                isExpanded ? 'w-full sm:max-w-[50vw]' : 'w-full sm:max-w-md',
+                'animate-in slide-in-from-right duration-300',
+            )}
+        >
+            {/* Header */}
+            <div className="flex items-center justify-between px-4 py-3 border-b border-white/10">
+                <div className="flex items-center gap-2">
+                    <Bug className="w-4 h-4 text-primary" />
+                    <span className="text-sm font-bold text-white">GitHub Issues</span>
+                    <span className="text-xs text-white/40">
+                        ({config.owner}/{config.repo})
+                    </span>
+                </div>
+                <div className="flex items-center gap-1">
+                    <button
+                        onClick={handleRefresh}
+                        disabled={loading}
+                        className={cn(
+                            'p-1.5 text-white/40 hover:text-white hover:bg-white/10 rounded-lg transition-colors',
+                            loading && 'animate-spin',
+                        )}
+                    >
+                        <RefreshCw className="w-3.5 h-3.5" />
+                    </button>
+                    <button
+                        onClick={toggleExpand}
+                        className="hidden sm:block p-1.5 text-white/40 hover:text-white hover:bg-white/10 rounded-lg transition-colors"
+                    >
+                        {isExpanded ? (
+                            <Minimize2 className="w-3.5 h-3.5" />
+                        ) : (
+                            <Maximize2 className="w-3.5 h-3.5" />
+                        )}
+                    </button>
+                    <button
+                        onClick={() => setSidebarOpen(false)}
+                        className="p-1.5 text-white/40 hover:text-white hover:bg-white/10 rounded-lg transition-colors"
+                    >
+                        <X className="w-4 h-4" />
+                    </button>
+                </div>
+            </div>
+
+            {/* Tabs */}
+            <div className="flex border-b border-white/10">
+                <button
+                    onClick={() => setTab('bugs')}
+                    className={cn(
+                        'flex-1 px-4 py-2.5 text-xs font-medium transition-colors',
+                        tab === 'bugs'
+                            ? 'text-red-400 border-b-2 border-red-500'
+                            : 'text-white/40 hover:text-white/70',
+                    )}
+                >
+                    🐛 Bugs ({bugs.length})
+                </button>
+                <button
+                    onClick={() => setTab('features')}
+                    className={cn(
+                        'flex-1 px-4 py-2.5 text-xs font-medium transition-colors',
+                        tab === 'features'
+                            ? 'text-emerald-400 border-b-2 border-emerald-500'
+                            : 'text-white/40 hover:text-white/70',
+                    )}
+                >
+                    ✨ Features ({features.length})
+                </button>
+            </div>
+
+            {/* Content */}
+            <div className="flex-1 overflow-y-auto p-3 space-y-2">
+                {loading ? (
+                    <div className="flex items-center justify-center py-12">
+                        <div className="w-6 h-6 border-2 border-white/20 border-t-primary rounded-full animate-spin" />
+                    </div>
+                ) : currentIssues.length === 0 ? (
+                    <div className="text-center py-12 text-sm text-white/30">
+                        No {tab === 'bugs' ? 'bugs' : 'features'} found
+                    </div>
+                ) : (
+                    currentIssues.map((issue) => (
+                        <IssueCard key={issue.id} issue={issue} expandedView={isExpanded} />
+                    ))
+                )}
+            </div>
+        </div>
+    )
+})