insforge 0.3.3 → 1.3.0

package/frontend/src/components/datagrid/DataGrid.tsx

@@ -33,14 +33,13 @@ export interface DataGridProps<TRow extends DataGridRowType = DataGridRow> {
   pageSize?: number;
   totalRecords?: number;
   onPageChange?: (page: number) => void;
-  emptyStateTitle?: string;
-  emptyStateActionText?: string;
-  onEmptyStateAction?: () => void;
+  emptyState?: React.ReactNode;
   rowKeyGetter?: (row: TRow) => string;
   className?: string;
   showSelection?: boolean;
   showPagination?: boolean;
   showTypeBadge?: boolean;
+  noPadding?: boolean;
 }
 
 // Main DataGrid component
@@ -60,16 +59,18 @@ export default function DataGrid<TRow extends DataGridRowType = DataGridRow>({
   pageSize,
   totalRecords,
   onPageChange,
-  emptyStateTitle = 'No data available',
-  emptyStateActionText,
-  onEmptyStateAction,
+  emptyState,
   rowKeyGetter,
   className,
   showSelection = false,
   showPagination = true,
   showTypeBadge = true,
+  noPadding = false,
 }: DataGridProps<TRow>) {
   const { resolvedTheme } = useTheme();
+
+  const defaultRowKeyGetter = useCallback((row: TRow) => row.id || Math.random().toString(), []);
+  const keyGetter = rowKeyGetter || defaultRowKeyGetter;
   // Convert columns to react-data-grid format
   const gridColumns = useMemo(() => {
     const cols: Column<TRow>[] = [];
@@ -86,13 +87,13 @@ export default function DataGrid<TRow extends DataGridRowType = DataGridRow>({
         resizable: false,
         renderCell: ({ row, tabIndex }) => (
           <Checkbox
-            checked={selectedRows.has(String(row.id))}
+            checked={selectedRows.has(keyGetter(row))}
             onChange={(checked) => {
               const newSelectedRows = new Set(selectedRows);
               if (checked) {
-                newSelectedRows.add(String(row.id));
+                newSelectedRows.add(String(keyGetter(row)));
               } else {
-                newSelectedRows.delete(String(row.id));
+                newSelectedRows.delete(String(keyGetter(row)));
               }
               onSelectedRowsChange(newSelectedRows);
             }}
@@ -180,16 +181,13 @@ export default function DataGrid<TRow extends DataGridRowType = DataGridRow>({
     sortColumns,
     showSelection,
     showTypeBadge,
+    keyGetter,
   ]);
 
-  // Default row key getter
-  const defaultRowKeyGetter = useCallback((row: TRow) => row.id || Math.random().toString(), []);
-  const keyGetter = rowKeyGetter || defaultRowKeyGetter;
-
   // Loading state - only show full loading screen if not sorting
   if (loading && !isSorting) {
     return (
-      <div className="h-full flex items-center justify-center bg-white dark:bg-neutral-800">
+      <div className="h-full flex items-center justify-center bg-bg-gray dark:bg-neutral-800">
         <div className="text-gray-500 dark:text-zinc-400">Loading...</div>
       </div>
     );
@@ -198,11 +196,16 @@ export default function DataGrid<TRow extends DataGridRowType = DataGridRow>({
   return (
     <div
       className={cn(
-        'h-full flex flex-col bg-bg-gray dark:bg-neutral-800 overflow-hidden',
+        'h-full flex flex-col overflow-hidden bg-bg-gray dark:bg-neutral-800',
         className
       )}
     >
-      <div className="flex-1 overflow-hidden relative mx-3 border border-border-gray dark:border-0">
+      <div
+        className={cn(
+          'flex-1 overflow-hidden relative border border-border-gray dark:border-neutral-700 rounded-sm',
+          !noPadding && 'mx-3'
+        )}
+      >
         <ReactDataGrid
           columns={gridColumns}
           rows={isRefreshing ? [] : data}
@@ -218,23 +221,13 @@ export default function DataGrid<TRow extends DataGridRowType = DataGridRow>({
           rowHeight={36}
           enableVirtualization={true}
           renderers={{
-            noRowsFallback: (
+            noRowsFallback: emptyState ? (
+              <div className="absolute inset-x-0 top-0 mt-13 py-8 flex items-center justify-center bg-white dark:bg-neutral-800">
+                {emptyState}
+              </div>
+            ) : (
               <div className="absolute inset-x-0 top-0 mt-13 py-8 flex items-center justify-center bg-white dark:bg-neutral-800">
-                <div className="flex flex-col gap-1 items-center">
-                  <div className="flex flex-row gap-2.5 items-center">
-                    <div className="text-sm text-zinc-500 dark:text-zinc-400">
-                      {emptyStateTitle}
-                    </div>
-                    {emptyStateActionText && onEmptyStateAction && (
-                      <button
-                        onClick={onEmptyStateAction}
-                        className="inline-flex items-center text-sm font-medium text-chart-blue-dark focus:outline-none focus:ring-0 dark:text-zinc-400"
-                      >
-                        {emptyStateActionText}
-                      </button>
-                    )}
-                  </div>
-                </div>
+                <div className="text-sm text-zinc-500 dark:text-zinc-400">No data to display</div>
               </div>
             ),
           }}

package/frontend/src/components/datagrid/cell-editors/DateCellEditor.tsx

@@ -1,9 +1,8 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { Calendar, ChevronLeft, ChevronRight, Clock } from 'lucide-react';
-import { Button } from '@/components/radix/Button';
 import { cn } from '@/lib/utils/utils';
 import { format, parse } from 'date-fns';
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/radix/Popover';
+import { Button, Popover, PopoverContent, PopoverTrigger } from '@/components';
 import type { DateCellEditorProps } from './types';
 import { ColumnType } from '@insforge/shared-schemas';
 

package/frontend/src/components/datagrid/cell-editors/JsonCellEditor.tsx

@@ -1,8 +1,6 @@
 import { useEffect, useState } from 'react';
 import { FileJson, AlertCircle, CheckCircle } from 'lucide-react';
-import { Button } from '@/components/radix/Button';
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/radix/Popover';
-import { ConfirmDialog } from '@/components/ConfirmDialog';
+import { ConfirmDialog, Button, Popover, PopoverContent, PopoverTrigger } from '@/components';
 import { cn } from '@/lib/utils/utils';
 import type { JsonCellEditorProps } from './types';
 
@@ -182,7 +180,7 @@ export function JsonCellEditor({
       }
 
       const keys = Object.keys(parsed);
-      if (keys.length === 0) {
+      if (!keys.length) {
         return '{}';
       }
       if (keys.length === 1) {

package/frontend/src/components/datagrid/index.ts

@@ -0,0 +1,23 @@
+// cell editor components
+export * from './cell-editors';
+
+// datagrid types
+export type * from './datagridTypes';
+export type { DataGridProps } from './DataGrid';
+export type {
+  Column,
+  SortColumn,
+  RenderCellProps,
+  RenderEditCellProps,
+  RenderHeaderCellProps,
+  // NOTE: react-data-grid@7.0.0-beta.47 still uses CellClickArgs.
+  // Future versions rename this to CellMouseArgs, so this can be updated when we bump the dependency.
+  CellClickArgs,
+  CellMouseEvent,
+} from 'react-data-grid';
+
+// datagrid components
+export { default as DataGrid } from './DataGrid';
+export { createDefaultCellRenderer } from './DefaultCellRenderer';
+export { default as IdCell } from './IdCell';
+export { default as SortableHeaderRenderer } from './SortableHeader';

package/frontend/src/components/index.ts

@@ -1,39 +1,32 @@
+// datagrid & cell editor components
+export * from './datagrid';
+
+// layout/menu components
+export * from './layout';
+
 // Core radix/ui components
-export * from './radix/Button';
-export * from './radix/Card';
-export * from './radix/Input';
-export * from './radix/Form';
-export * from './radix/Tabs';
-export * from './radix/Badge';
-export * from './radix/Skeleton';
-export * from './radix/ScrollArea';
-export * from './radix/Separator';
-export * from './radix/Alert';
-export * from './radix/DropdownMenu';
-export * from './radix/Dialog';
-export * from './radix/Label';
-export * from './radix/Popover';
-export * from './radix/Select';
-export * from './radix/Sheet';
-export * from './radix/Switch';
-export * from './radix/Tooltip';
-export * from './radix/AlertDialog';
-export * from './radix/Avatar';
-export * from './ConfirmDialog';
-export * from './ButtonWithLoading';
+export * from './radix';
 
 // Custom UI components
+export { ButtonWithLoading } from './ButtonWithLoading';
+export { Checkbox } from './Checkbox';
+export { CodeBlock } from './CodeBlock';
+export { CodeEditor } from './CodeEditor';
+export { ConfirmDialog } from './ConfirmDialog';
+export { ConnectCTA } from './ConnectCTA';
+export { ProjectInfoModal } from './ProjectInfoModal';
+export { CopyButton } from './CopyButton';
+export { DeleteActionButton } from './DeleteActionButton';
 export { EmptyState } from './EmptyState';
-export { LoadingState } from './LoadingState';
 export { ErrorState } from './ErrorState';
+export { FeatureSidebar } from './FeatureSidebar';
+export { FeatureSidebarItem } from './FeatureSidebarItem';
 export { JsonHighlight } from './JsonHighlight';
+export { LoadingState } from './LoadingState';
+export { PaginationControls, type PaginationControlsProps } from './PaginationControls';
+export { PromptDialog } from './PromptDialog';
 export { SearchInput } from './SearchInput';
-export { PaginationControls } from './PaginationControls';
 export { SelectionClearButton } from './SelectionClearButton';
-export { DeleteActionButton } from './DeleteActionButton';
-export { Checkbox } from './Checkbox';
+export { CircularStepper, LinearStepper, VerticalStepper } from './Stepper';
+export { ThemeToggle } from './ThemeToggle';
 export { TypeBadge } from './TypeBadge';
-
-// Data Grid Components
-export { DataGrid, SortableHeaderRenderer } from './datagrid';
-export type { DataGridProps } from './datagrid';

package/frontend/src/components/layout/AppHeader.tsx

@@ -1,41 +1,74 @@
 import { useState, useEffect } from 'react';
 import { LogOut, ChevronDown } from 'lucide-react';
 import {
+  Avatar,
+  AvatarFallback,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from '@/components/radix/DropdownMenu';
-import { Avatar, AvatarFallback } from '@/components/radix/Avatar';
-import { Separator } from '@/components/radix/Separator';
+  Separator,
+  ThemeToggle,
+} from '@/components';
+import {
+  McpConnectionStatus,
+  OnboardingModal,
+  getOnboardingSkipped,
+  setOnboardingSkipped,
+} from '@/features/onboard';
+import { useMcpUsage } from '@/features/logs/hooks/useMcpUsage';
 import { cn } from '@/lib/utils/utils';
-import { ThemeToggle } from '@/components/ThemeToggle';
 import { useTheme } from '@/lib/contexts/ThemeContext';
+import { useAuth } from '@/lib/contexts/AuthContext';
 
 // Import SVG icons
 import DiscordIcon from '@/assets/logos/discord.svg?react';
 import GitHubIcon from '@/assets/logos/github.svg?react';
 import InsForgeLogoLight from '@/assets/logos/insforge_light.svg';
 import InsForgeLogoDark from '@/assets/logos/insforge_dark.svg';
-import { User } from '@/lib/contexts/AuthContext';
-
-interface AppHeaderProps {
-  currentUser: User | null;
-  onLogout: () => void;
-}
 
-export default function AppHeader({ currentUser, onLogout }: AppHeaderProps) {
+export default function AppHeader() {
   const { resolvedTheme } = useTheme();
-  const [currentEmojiIndex, setCurrentEmojiIndex] = useState(0);
-  const emojis = ['🙏', '🥺', '🫵'];
+  const { user, logout } = useAuth();
+  const { hasCompletedOnboarding, isLoading: isMcpLoading } = useMcpUsage();
+  const [githubStars, setGithubStars] = useState<number | null>(null);
+  const [isOnboardingModalOpen, setIsOnboardingModalOpen] = useState(false);
+
+  // Fetch GitHub stars
+  useEffect(() => {
+    fetch('https://api.github.com/repos/InsForge/InsForge')
+      .then((res) => res.json())
+      .then((data) => {
+        if (data.stargazers_count !== undefined) {
+          setGithubStars(data.stargazers_count);
+        }
+      })
+      .catch((err) => {
+        console.error('Failed to fetch GitHub stars:', err);
+      });
+  }, []);
+
+  // Auto-open onboarding modal if user hasn't connected and hasn't skipped
+  useEffect(() => {
+    if (!isMcpLoading && !hasCompletedOnboarding && !getOnboardingSkipped()) {
+      setIsOnboardingModalOpen(true);
+    }
+  }, [isMcpLoading, hasCompletedOnboarding]);
 
+  // When MCP connection is established, close onboarding modal and clear skip flag
   useEffect(() => {
-    const interval = setInterval(() => {
-      setCurrentEmojiIndex((prevIndex) => (prevIndex + 1) % emojis.length);
-    }, 2000);
+    if (hasCompletedOnboarding) {
+      setIsOnboardingModalOpen(false);
+      setOnboardingSkipped(false);
+    }
+  }, [hasCompletedOnboarding]);
 
-    return () => clearInterval(interval);
-  }, [emojis.length]);
+  const formatStars = (count: number): string => {
+    if (count >= 1000) {
+      return `${(count / 1000).toFixed(1)}k`;
+    }
+    return count.toString();
+  };
 
   const getUserInitials = (email: string) => {
     if (!email) {
@@ -65,82 +98,89 @@ export default function AppHeader({ currentUser, onLogout }: AppHeaderProps) {
   };
 
   return (
-    <div className="h-16 w-full bg-white dark:bg-neutral-800 border-b border-border-gray dark:border-neutral-700 z-50 flex items-center justify-between px-6">
-      {/* Logo */}
-      <div className="px-2 py-3">
-        <img
-          src={resolvedTheme === 'light' ? InsForgeLogoLight : InsForgeLogoDark}
-          alt="Insforge Logo"
-          className="h-8 w-auto"
-        />
-      </div>
+    <>
+      <div className="h-12 w-full bg-white dark:bg-neutral-800 border-b border-border-gray dark:border-neutral-700 z-50 flex items-center justify-between px-6">
+        {/* Logo */}
 
-      {/* Social Links */}
-      <div className="flex items-center gap-3">
-        {/* GitHub Badge */}
-        <a
-          href="https://github.com/InsForge/InsForge"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="inline-flex items-center gap-3 h-10 px-4 text-zinc-50 text-sm font-medium bg-black hover:bg-[#28282F] rounded-full transition-all duration-200"
-        >
-          <GitHubIcon className="h-5 w-5 dark:text-white" />
-          <p className="text-sm text-white">
-            We need you
-            <span className="text-md ml-1">{emojis[currentEmojiIndex]}</span>
-          </p>
+        <a href="https://insforge.dev" target="_blank" rel="noopener noreferrer">
+          <img
+            src={resolvedTheme === 'light' ? InsForgeLogoLight : InsForgeLogoDark}
+            alt="Insforge Logo"
+            className="h-7 w-auto"
+          />
         </a>
 
-        {/* Discord Badge */}
-        <a
-          href="https://discord.gg/mqPxArVZ26"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="inline-flex items-center gap-3 h-10 px-4 text-zinc-50 text-sm font-medium bg-[#5765F2] hover:bg-[#3E4CD7] rounded-full transition-all duration-200"
-        >
-          <DiscordIcon className="h-5 w-5" />
-          <p className="text-sm text-white mr-1.5">Ask us anything</p>
-        </a>
-        <Separator className="h-6 mx-1" orientation="vertical" />
-        {/* Theme Toggle */}
-        <ThemeToggle />
-        <Separator className="h-6 mx-1" orientation="vertical" />
-        {/* User Profile */}
-        <DropdownMenu modal={false}>
-          <DropdownMenuTrigger asChild>
-            <button className="w-50 flex items-center gap-3 hover:bg-zinc-100 dark:hover:bg-zinc-800 rounded-[8px] pr-3 transition-all duration-200 group">
-              <Avatar className="h-10 w-10 ring-2 ring-white dark:ring-gray-700 shadow-sm">
-                <AvatarFallback
-                  className={cn(
-                    'text-white font-medium text-sm',
-                    getAvatarColor(currentUser?.email ?? '')
-                  )}
-                >
-                  {getUserInitials(currentUser?.email ?? '')}
-                </AvatarFallback>
-              </Avatar>
-              <div className="text-left hidden md:block">
-                <p className="text-sm font-medium text-zinc-950 dark:text-zinc-100 leading-tight">
-                  Admin
-                </p>
-                <p className="text-xs text-zinc-500 dark:text-zinc-400">
-                  {currentUser?.email || 'Administrator'}
-                </p>
-              </div>
-              <ChevronDown className="h-5 w-5 text-black dark:text-white hidden md:block ml-auto" />
-            </button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end" className="w-48" sideOffset={8} collisionPadding={16}>
-            <DropdownMenuItem
-              onClick={onLogout}
-              className="cursor-pointer text-red-600 dark:text-red-400"
-            >
-              <LogOut className="mr-2 h-4 w-4" />
-              <span>Sign Out</span>
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
+        {/* Right side controls */}
+        <div className="flex items-center gap-1">
+          {/* Social Links - Small Icon Buttons */}
+          <a
+            href="https://discord.gg/DvBtaEc9Jz"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="p-2 text-gray-600 dark:text-zinc-400 hover:text-neutral-900 dark:hover:text-white transition-colors duration-200"
+            aria-label="Discord"
+          >
+            <DiscordIcon className="h-5 w-5" />
+          </a>
+          <a
+            href="https://github.com/InsForge/InsForge"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex items-center gap-1.5 p-2 text-gray-600 dark:text-zinc-400 hover:text-neutral-900 dark:hover:text-white transition-colors duration-200"
+            aria-label="GitHub"
+          >
+            <GitHubIcon className="h-5 w-5" />
+            {githubStars !== null && (
+              <span className="text-sm font-medium">{formatStars(githubStars)}</span>
+            )}
+          </a>
+          <Separator className="h-5 mx-2" orientation="vertical" />
+          {/* Theme Toggle */}
+          <ThemeToggle />
+          <Separator className="h-5 mx-2" orientation="vertical" />
+          {/* MCP Connection Status */}
+          <McpConnectionStatus onConnectClick={() => setIsOnboardingModalOpen(true)} />
+
+          {/* User Profile*/}
+          <Separator className="h-5 mx-2" orientation="vertical" />
+          <DropdownMenu modal={false}>
+            <DropdownMenuTrigger asChild>
+              <button className="w-50 flex items-center gap-3 hover:bg-zinc-100 dark:hover:bg-zinc-800 rounded-[8px] pr-3 transition-all duration-200 group">
+                <Avatar className="h-8 w-8 ring-2 ring-white dark:ring-gray-700 shadow-sm">
+                  <AvatarFallback
+                    className={cn(
+                      'text-white font-medium text-sm',
+                      getAvatarColor(user?.email ?? '')
+                    )}
+                  >
+                    {getUserInitials(user?.email ?? '')}
+                  </AvatarFallback>
+                </Avatar>
+                <div className="text-left hidden md:block">
+                  <p className="text-sm font-medium text-zinc-950 dark:text-zinc-100 leading-tight">
+                    Admin
+                  </p>
+                  <p className="text-xs text-zinc-500 dark:text-zinc-400">
+                    {user?.email || 'Administrator'}
+                  </p>
+                </div>
+                <ChevronDown className="h-5 w-5 text-black dark:text-white hidden md:block ml-auto" />
+              </button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" className="w-48" sideOffset={8} collisionPadding={16}>
+              <DropdownMenuItem
+                onClick={logout}
+                className="cursor-pointer text-red-600 dark:text-red-400"
+              >
+                <LogOut className="mr-2 h-4 w-4" />
+                <span>Sign Out</span>
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
       </div>
-    </div>
+      {/* Onboarding Modal */}
+      <OnboardingModal open={isOnboardingModalOpen} onOpenChange={setIsOnboardingModalOpen} />
+    </>
   );
 }