insforge 0.3.2 → 1.2.10

package/frontend/src/features/dashboard/page/DashboardPage.tsx

@@ -1,193 +1,211 @@
-import { useNavigate, useLocation } from 'react-router-dom';
-import { useMetadata } from '@/features/metadata/hooks/useMetadata';
-import { Skeleton } from '@/components/radix/Skeleton';
-import { Card, CardContent } from '@/components/radix/Card';
-import { Users, Database, HardDrive, ArrowLeftRight, Link2 } from 'lucide-react';
+import { useState } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { useMetadata } from '@/lib/hooks/useMetadata';
 import { useUsers } from '@/features/auth';
+import { Users, Database, HardDrive, Lock, ChevronRight } from 'lucide-react';
+import { ConnectionSuccessBanner, StatsCard, PromptCard, PromptDialog } from '../components';
+import { useMcpUsage } from '@/features/logs/hooks/useMcpUsage';
+import { LogsDataGrid, type LogsColumnDef } from '@/features/logs/components/LogsDataGrid';
+import { cn, formatTime } from '@/lib/utils/utils';
+import { Button } from '@/components';
+import { quickStartPrompts, type PromptTemplate } from '../prompts';
 
 export default function DashboardPage() {
-  const navigate = useNavigate();
   const location = useLocation();
+  const navigate = useNavigate();
+  const [selectedPrompt, setSelectedPrompt] = useState<PromptTemplate | null>(null);
+  const [promptDialogOpen, setPromptDialogOpen] = useState(false);
   const { metadata, auth, tables, storage, isLoading } = useMetadata();
   const { totalUsers } = useUsers();
+  const { records } = useMcpUsage();
 
-  const handleNavigateTo = (to: string, state?: { initialTab?: string }) => {
-    const basePath = location.pathname.includes('/cloud')
-      ? location.pathname.replace('/dashboard', '')
-      : location.pathname;
-    void navigate(`${basePath}/${to}`, { state });
-  };
+  const authCount = auth?.oauths.length ?? 0;
+  const tableCount = tables?.length ?? 0;
+  const showBanner = location.state?.showSuccessBanner === true;
+
+  const mcpColumns: LogsColumnDef[] = [
+    {
+      key: 'tool_name',
+      name: 'MCP Call',
+      width: '12fr',
+      renderCell: ({ row }) => (
+        <p className="text-sm text-gray-900 dark:text-white font-normal leading-6">
+          {String(row.tool_name ?? '')}
+        </p>
+      ),
+    },
+    {
+      key: 'created_at',
+      name: 'Time',
+      width: 'minmax(200px, 1fr)',
+      renderCell: ({ row }) => (
+        <p className="text-sm text-gray-900 dark:text-white font-normal leading-6">
+          {formatTime(String(row.created_at ?? ''))}
+        </p>
+      ),
+    },
+  ];
 
-  const handleConnectInsForge = () => {
-    if (window.parent !== window) {
-      // Send message to parent window to open onboarding overlay
-      window.parent.postMessage(
-        {
-          type: 'SHOW_CONNECT_OVERLAY',
-        },
-        '*'
-      );
-    } else {
-      void handleNavigateTo('onboard');
-    }
+  const handleViewMoreClick = () => {
+    void navigate('/dashboard/logs/MCP');
   };
 
   return (
-    <main className="h-full bg-white dark:bg-neutral-800">
-      <div className="flex justify-center py-6 px-0">
-        <div className="flex flex-col gap-6 w-full max-w-[1080px] px-6">
-          {/* Dashboard Header */}
-          <div className="flex items-center justify-between w-full">
-            <h1 className="text-xl font-semibold text-gray-900 dark:text-white tracking-[-0.1px]">
-              Dashboard
-            </h1>
+    <main className="h-full bg-white dark:bg-neutral-800 overflow-y-auto px-6">
+      <div className="flex flex-col gap-16 w-full max-w-[1080px] mx-auto pt-6 pb-8">
+        <div className="flex flex-col gap-6">
+          {/* Connection Success Banner - Only shows once on first connection */}
+          {showBanner && <ConnectionSuccessBanner />}
+          <h1 className="text-xl font-semibold text-gray-900 dark:text-white tracking-[-0.1px]">
+            Dashboard
+          </h1>
+
+          {/* Stats Section */}
+          <section className="flex flex-col gap-6 w-full">
+            <div className="flex gap-6 w-full h-[176px]">
+              <StatsCard
+                icon={Users}
+                title="AUTH"
+                value={(totalUsers || 0).toLocaleString()}
+                unit={totalUsers === 1 ? 'user' : 'users'}
+                description={`${authCount} OAuth ${authCount === 1 ? 'provider' : 'providers'} enabled`}
+                isLoading={isLoading}
+              />
+
+              <StatsCard
+                icon={Database}
+                title="Database"
+                value={(metadata?.database?.totalSizeInGB || 0).toFixed(2)}
+                unit="GB"
+                description={`${tableCount} ${tableCount === 1 ? 'Table' : 'Tables'}`}
+                isLoading={isLoading}
+              />
+
+              <StatsCard
+                icon={HardDrive}
+                title="Storage"
+                value={(storage?.totalSizeInGB || 0).toFixed(2)}
+                unit="GB"
+                description={`${storage?.buckets?.length || 0} ${storage?.buckets?.length === 1 ? 'Bucket' : 'Buckets'}`}
+                isLoading={isLoading}
+              />
+            </div>
+          </section>
+        </div>
+
+        {/* Quick Start Prompt Section */}
+        <section className="flex flex-col gap-6 w-full">
+          <div className="flex flex-col gap-1 w-full">
+            <h2 className="text-xl font-semibold text-gray-900 dark:text-white tracking-[-0.1px]">
+              Quick Start Prompt
+            </h2>
+            <p className="text-sm text-gray-500 dark:text-neutral-400 leading-6">
+              Paste the prompts below into your agent to quickly start building real apps.
+            </p>
           </div>
 
-          {/* Connect InsForge Card */}
-          <Card className="w-full bg-white dark:bg-[#333333] rounded-lg border border-gray-200 dark:border-neutral-700 shadow-[0px_1px_3px_0px_rgba(0,0,0,0.1)]">
-            <CardContent className="px-8 py-6">
-              <div className="flex items-center justify-between">
-                <div className="flex flex-col gap-2">
-                  <div className="flex items-center gap-2">
-                    <Link2 className="w-5 h-5 text-black dark:text-white" />
-                    <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
-                      Connect InsForge
-                    </h3>
-                  </div>
-                  <p className="text-sm text-gray-600 dark:text-neutral-400">
-                    With InsForge connected, your agent takes care of the backend for you
-                  </p>
-                </div>
-                <button
-                  type="button"
-                  className="flex items-center gap-2 px-4 py-2 bg-emerald-300 hover:bg-emerald-400 text-black rounded font-medium text-sm transition-colors cursor-pointer"
-                  onClick={handleConnectInsForge}
-                >
-                  <ArrowLeftRight className="w-5 h-5" />
-                  Connect
-                </button>
-              </div>
-            </CardContent>
-          </Card>
+          <div className="grid grid-cols-3 gap-6 w-full">
+            {quickStartPrompts.map((prompt, index) => (
+              <PromptCard
+                key={index}
+                title={prompt.title}
+                onClick={() => {
+                  setSelectedPrompt(prompt);
+                  setPromptDialogOpen(true);
+                }}
+              />
+            ))}
+          </div>
+
+          <PromptDialog
+            open={promptDialogOpen}
+            onOpenChange={setPromptDialogOpen}
+            promptTemplate={selectedPrompt}
+          />
+        </section>
+
+        {/* Templates & Components Section */}
+        <section className="flex flex-col gap-6 w-full">
+          <div className="flex flex-col gap-1 w-full">
+            <h2 className="text-xl font-semibold text-gray-900 dark:text-white tracking-[-0.1px]">
+              Explore Our Platform
+            </h2>
+            <p className="text-sm text-gray-500 dark:text-neutral-400 leading-6">
+              InsForge gives you every backend feature you need. Use the whole platform or just the
+              features you want.
+            </p>
+          </div>
 
-          {/* Stats Cards */}
           <div className="flex gap-6 w-full">
-            {/* AUTH Card */}
-            <Card className="flex-1 bg-white dark:bg-[#333333] rounded-lg border border-gray-200 dark:border-neutral-700 shadow-[0px_1px_3px_0px_rgba(0,0,0,0.1)] h-[280px]">
-              <CardContent className="p-8 h-full flex flex-col justify-between">
-                <div className="flex flex-col gap-2">
-                  <div className="flex items-center gap-2 h-7">
-                    <Users className="w-5 h-5 text-gray-700 dark:text-white" />
-                    <span className="text-base font-normal text-gray-900 dark:text-white">
-                      AUTH
-                    </span>
-                  </div>
-                </div>
-                <div className="flex flex-col gap-4">
-                  <div className="flex items-baseline gap-2">
-                    {isLoading ? (
-                      <Skeleton className="h-8 w-16 bg-gray-200 dark:bg-neutral-700" />
-                    ) : (
-                      <>
-                        <span className="text-2xl font-normal text-gray-900 dark:text-white tracking-[-0.144px]">
-                          {(totalUsers || 0).toLocaleString()}
-                        </span>
-                        <span className="text-sm font-normal text-gray-500 dark:text-neutral-400">
-                          {totalUsers === 1 ? 'user' : 'users'}
-                        </span>
-                      </>
-                    )}
-                  </div>
-                  {isLoading ? (
-                    <Skeleton className="h-5 w-36 bg-gray-200 dark:bg-neutral-700" />
-                  ) : (
-                    <p className="text-base text-gray-500 dark:text-neutral-400">
-                      {(() => {
-                        const authCount = auth?.oauths.length || 0;
-                        return `${authCount} OAuth ${authCount === 1 ? 'provider' : 'providers'} enabled`;
-                      })()}
-                    </p>
-                  )}
+            {/* Sign-in Component Card */}
+            <button
+              onClick={() => void navigate('/dashboard/authentication/auth-methods')}
+              className="flex-1 bg-white dark:bg-[#363636] border border-gray-200 dark:border-[#414141] rounded-lg p-4 flex items-center gap-3 hover:bg-gray-50 hover:border-gray-300 dark:hover:bg-neutral-700 dark:hover:border-[#525252] hover:shadow-sm transition-all group"
+            >
+              <div className="flex-1 flex items-center gap-4">
+                <div className="bg-gray-100 dark:bg-neutral-800 rounded p-3.5 flex items-center justify-center shrink-0">
+                  <Lock className="w-6 h-6 text-gray-600 dark:text-neutral-400" />
                 </div>
-              </CardContent>
-            </Card>
-
-            {/* Database Card */}
-            <Card className="flex-1 bg-white dark:bg-[#333333] rounded-lg border border-gray-200 dark:border-neutral-700 shadow-[0px_1px_3px_0px_rgba(0,0,0,0.1)] h-[280px]">
-              <CardContent className="p-8 h-full flex flex-col justify-between">
-                <div className="flex flex-col gap-2">
-                  <div className="flex items-center gap-2 h-7">
-                    <Database className="w-5 h-5 text-gray-700 dark:text-white" />
-                    <span className="text-base font-normal text-gray-900 dark:text-white">
-                      Database
-                    </span>
-                  </div>
+                <div className="flex flex-col gap-1 items-start text-left">
+                  <p className="text-base text-gray-900 dark:text-white font-normal leading-6">
+                    Authentication
+                  </p>
+                  <p className="text-sm text-gray-500 dark:text-neutral-400 leading-6">
+                    User Authentication and management
+                  </p>
                 </div>
-                <div className="flex flex-col gap-4">
-                  <div className="flex items-baseline gap-2">
-                    {isLoading ? (
-                      <Skeleton className="h-8 w-14 bg-gray-200 dark:bg-neutral-700" />
-                    ) : (
-                      <>
-                        <span className="text-2xl font-normal text-gray-900 dark:text-white tracking-[-0.144px]">
-                          {(metadata?.database?.totalSize || 0).toFixed(2)}
-                        </span>
-                        <span className="text-sm font-normal text-gray-500 dark:text-neutral-400">
-                          GB
-                        </span>
-                      </>
-                    )}
-                  </div>
-                  {isLoading ? (
-                    <Skeleton className="h-5 w-16 bg-gray-200 dark:bg-neutral-700" />
-                  ) : (
-                    <p className="text-base text-gray-500 dark:text-neutral-400">
-                      {tables.length || 0} {tables.length === 1 ? 'Table' : 'Tables'}
-                    </p>
-                  )}
+              </div>
+              <ChevronRight className="w-5 h-5 text-gray-400 dark:text-neutral-400 shrink-0 group-hover:translate-x-0.5 transition-transform" />
+            </button>
+
+            {/* Database Templates Card */}
+            <button
+              onClick={() => void navigate('/dashboard/tables')}
+              className="flex-1 bg-white dark:bg-[#363636] border border-gray-200 dark:border-[#414141] rounded-lg p-4 flex items-center gap-3 hover:bg-gray-50 hover:border-gray-300 dark:hover:bg-neutral-700 dark:hover:border-[#525252] hover:shadow-sm transition-all group"
+            >
+              <div className="flex-1 flex items-center gap-4">
+                <div className="bg-gray-100 dark:bg-neutral-800 rounded p-3.5 flex items-center justify-center shrink-0">
+                  <Database className="w-6 h-6 text-gray-600 dark:text-neutral-400" />
                 </div>
-              </CardContent>
-            </Card>
-
-            {/* Storage Card */}
-            <Card className="flex-1 bg-white dark:bg-[#333333] rounded-lg border border-gray-200 dark:border-neutral-700 shadow-[0px_1px_3px_0px_rgba(0,0,0,0.1)] h-[280px]">
-              <CardContent className="p-8 h-full flex flex-col justify-between">
-                <div className="flex flex-col gap-2">
-                  <div className="flex items-center gap-2 h-7">
-                    <HardDrive className="w-5 h-5 text-gray-700 dark:text-white" />
-                    <span className="text-base font-normal text-gray-900 dark:text-white">
-                      Storage
-                    </span>
-                  </div>
+                <div className="flex flex-col gap-1 items-start text-left">
+                  <p className="text-base text-gray-900 dark:text-white font-normal leading-6">
+                    Database
+                  </p>
+                  <p className="text-sm text-gray-500 dark:text-neutral-400 leading-6">
+                    Manage your tables and data
+                  </p>
                 </div>
-                <div className="flex flex-col gap-4">
-                  <div className="flex items-baseline gap-2">
-                    {isLoading ? (
-                      <Skeleton className="h-8 w-14 bg-gray-200 dark:bg-neutral-700" />
-                    ) : (
-                      <>
-                        <span className="text-2xl font-normal text-gray-900 dark:text-white tracking-[-0.144px]">
-                          {(storage?.totalSize || 0).toFixed(2)}
-                        </span>
-                        <span className="text-sm font-normal text-gray-500 dark:text-neutral-400">
-                          GB
-                        </span>
-                      </>
-                    )}
-                  </div>
-                  {isLoading ? (
-                    <Skeleton className="h-5 w-20 bg-gray-200 dark:bg-neutral-700" />
-                  ) : (
-                    <p className="text-base text-gray-500 dark:text-neutral-400">
-                      {storage?.buckets?.length || 0}{' '}
-                      {storage?.buckets?.length === 1 ? 'Bucket' : 'Buckets'}
-                    </p>
-                  )}
+              </div>
+              <ChevronRight className="w-5 h-5 text-gray-400 dark:text-neutral-400 shrink-0 group-hover:translate-x-0.5 transition-transform" />
+            </button>
+          </div>
+        </section>
+
+        {/* MCP Call Records Section */}
+        <section className="flex flex-col gap-6 w-full">
+          <div className="flex items-center justify-between w-full">
+            <p className="text-xl font-semibold text-gray-900 dark:text-white">MCP Call Records</p>
+            <Button
+              onClick={handleViewMoreClick}
+              className="h-8 px-4 font-medium dark:bg-emerald-300 dark:text-black"
+            >
+              View More
+            </Button>
+          </div>
+
+          <div className={cn('w-full overflow-hidden', !records.length && 'h-60')}>
+            <LogsDataGrid
+              columnDefs={mcpColumns}
+              data={records.slice(0, 5)}
+              emptyState={
+                <div className="h-20 text-sm text-zinc-500 dark:text-zinc-400">
+                  No MCP call records found
                 </div>
-              </CardContent>
-            </Card>
+              }
+              noPadding
+            />
           </div>
-        </div>
+        </section>
       </div>
     </main>
   );

package/frontend/src/features/dashboard/prompts/ai-chatbot.ts

@@ -0,0 +1,13 @@
+export const aiChatbotPrompt = {
+  title: 'AI Chatbot',
+  description: 'Paste below prompts to your agent as a quick start for building real apps',
+  prompt: `Build an AI chatbot app using InsForge as the backend platform with these features:
+• Sign in and sign out before chatting
+• Chat window with message history per conversation
+• Create and delete conversations
+• Upload images in chat and store them in InsForge storage
+• Show uploaded images inline
+• Clear all messages in a conversation
+• Each user only sees their own chats and files`,
+  features: ['Authentication', 'Database', 'Storage', 'AI Integration'],
+};

package/frontend/src/features/dashboard/prompts/crm-system.ts

@@ -0,0 +1,13 @@
+export const crmSystemPrompt = {
+  title: 'CRM',
+  description: 'Paste below prompts to your agent as a quick start for building real apps',
+  prompt: `Build a lightweight CRM app using InsForge as the backend platform with these features:
+• Contacts with search and simple tags
+• Companies and linked contacts
+• Deals pipeline with stages and easy stage updates
+• Deal detail with notes, tasks, and next follow up date
+• Reminders for upcoming tasks and follow ups
+• Activity timeline that logs deal stage changes and notes
+• File attachments stored in InsForge storage and shown on the deal page`,
+  features: ['Authentication', 'Database', 'Storage'],
+};

package/frontend/src/features/dashboard/prompts/ecommerce-platform.ts

@@ -0,0 +1,12 @@
+export const ecommercePlatformPrompt = {
+  title: 'E-commerce',
+  description: 'Paste below prompts to your agent as a quick start for building real apps',
+  prompt: `Build an app similar to a modern online store using InsForge as the backend platform that has these features:
+• Displays a list of products with images, names, prices, and descriptions
+• Allows users to add products to a shopping cart
+• Has a "Cart" page for reviewing and removing items before checkout
+• Has a simple checkout form for entering shipping details
+• Allows business owners to add, edit, and delete products
+• Stores product images in InsForge storage`,
+  features: ['Authentication', 'Database', 'Storage'],
+};

package/frontend/src/features/dashboard/prompts/index.ts

@@ -0,0 +1,31 @@
+import { crmSystemPrompt } from './crm-system';
+import { aiChatbotPrompt } from './ai-chatbot';
+import { ecommercePlatformPrompt } from './ecommerce-platform';
+import { redditClonePrompt } from './reddit-clone';
+import { instagramClonePrompt } from './instagram-clone';
+import { notionClonePrompt } from './notion-clone';
+
+export interface PromptTemplate {
+  title: string;
+  description: string;
+  prompt: string;
+  features: string[];
+}
+
+export const quickStartPrompts: PromptTemplate[] = [
+  crmSystemPrompt,
+  aiChatbotPrompt,
+  ecommercePlatformPrompt,
+  redditClonePrompt,
+  instagramClonePrompt,
+  notionClonePrompt,
+];
+
+export {
+  crmSystemPrompt,
+  aiChatbotPrompt,
+  ecommercePlatformPrompt,
+  redditClonePrompt,
+  instagramClonePrompt,
+  notionClonePrompt,
+};

package/frontend/src/features/dashboard/prompts/instagram-clone.ts

@@ -0,0 +1,11 @@
+export const instagramClonePrompt = {
+  title: 'Instagram Clone',
+  description: 'Paste below prompts to your agent as a quick start for building real apps',
+  prompt: `Build an app similar to Instagram with a global shared image stream using InsForge as the backend platform that has these features:
+• Has a drag and drop box for uploading images to InsForge storage with an optional caption
+• Has a "Feed" tab for viewing the global image stream
+• Has a "My Photos" tab for viewing and deleting your own images
+• Allows liking images in the "Feed" tab
+• Shows like count for each image`,
+  features: ['Authentication', 'Database', 'Storage'],
+};

package/frontend/src/features/dashboard/prompts/notion-clone.ts

@@ -0,0 +1,14 @@
+export const notionClonePrompt = {
+  title: 'Notion Clone',
+  description: 'Paste below prompts to your agent as a quick start for building real apps',
+  prompt: `Make a notes app like Notion using InsForge as the backend platform with these features:
+• User authentication for sign in and sign out
+• Pages list in a sidebar with create and delete
+• Each page has a title and rich text or simple markdown content
+• Support private pages for each user and public pages visible to all users
+• Search over page titles
+• Clean and minimal interface with white space and a neutral color palette
+• Focus on readable text with minimal distractions
+• Optional file attachments stored in InsForge storage and shown inside the page`,
+  features: ['Authentication', 'Database', 'Storage'],
+};

package/frontend/src/features/dashboard/prompts/reddit-clone.ts

@@ -0,0 +1,12 @@
+export const redditClonePrompt = {
+  title: 'Reddit Clone',
+  description: 'Paste below prompts to your agent as a quick start for building real apps',
+  prompt: `Build an app similar to Reddit with community-based discussion threads using InsForge as the backend platform that has these features:
+• Has a "Communities" list where users can browse or create communities
+• Each community has its own posts feed
+• Users can create posts with a title and body (text or image upload to InsForge storage)
+• Users can comment on posts and reply to other comments
+• Allows upvoting and downvoting for both posts and comments
+• Shows vote counts and comment counts for each post`,
+  features: ['Authentication', 'Database', 'Storage'],
+};