veryfront 0.0.46 → 0.0.48

package/dist/integrations/_base/files/app/api/auth/status/route.ts

@@ -0,0 +1,30 @@
+import { tokenStore } from "../../../../lib/token-store.ts";
+
+// Services to check - add/remove based on your integrations
+// Gmail and Calendar share OAuth credentials, so we check both separately
+const SERVICES = [
+  { id: "gmail", name: "Gmail" },
+  { id: "calendar", name: "Calendar" },
+  // { id: 'slack', name: 'Slack' },
+  // { id: 'github', name: 'GitHub' },
+];
+
+export async function GET() {
+  // In production, get userId from session/cookie
+  // For development, we use a default user
+  const userId = "current-user";
+
+  const services: Record<string, boolean> = {};
+
+  for (const service of SERVICES) {
+    try {
+      services[service.id] = await tokenStore.isConnected(userId, service.id);
+    } catch {
+      services[service.id] = false;
+    }
+  }
+
+  return new Response(JSON.stringify({ services }), {
+    headers: { "Content-Type": "application/json" },
+  });
+}

package/dist/integrations/_base/files/app/components/ServiceConnections.tsx

@@ -0,0 +1,153 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+interface Service {
+  id: string;
+  name: string;
+  connected: boolean;
+  authUrl: string;
+}
+
+interface ServiceConnectionsProps {
+  services: Array<{
+    id: string;
+    name: string;
+    authUrl: string;
+  }>;
+  className?: string;
+}
+
+export function ServiceConnections({ services, className = "" }: ServiceConnectionsProps) {
+  const [status, setStatus] = useState<Record<string, boolean>>({});
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    async function checkStatus() {
+      try {
+        const res = await fetch("/api/auth/status");
+        if (res.ok) {
+          const data = await res.json();
+          setStatus(data.services || {});
+        }
+      } catch (err) {
+        console.error("Failed to check service status:", err);
+      } finally {
+        setLoading(false);
+      }
+    }
+    checkStatus();
+  }, []);
+
+  const servicesWithStatus: Service[] = services.map((s) => ({
+    ...s,
+    connected: status[s.id] ?? false,
+  }));
+
+  const connectedCount = servicesWithStatus.filter((s) => s.connected).length;
+
+  if (loading) {
+    return (
+      <div className={`flex items-center gap-2 ${className}`}>
+        <div className="animate-pulse h-6 w-32 bg-neutral-200 dark:bg-neutral-700 rounded" />
+      </div>
+    );
+  }
+
+  return (
+    <div className={`flex items-center gap-2 ${className}`}>
+      {servicesWithStatus.map((service) => <ServiceBadge key={service.id} service={service} />)}
+      {connectedCount < services.length && (
+        <span className="text-xs text-neutral-500 dark:text-neutral-400 ml-1">
+          {connectedCount}/{services.length} connected
+        </span>
+      )}
+    </div>
+  );
+}
+
+function ServiceBadge({ service }: { service: Service }) {
+  const handleConnect = () => {
+    window.location.href = service.authUrl;
+  };
+
+  if (service.connected) {
+    return (
+      <span
+        className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400"
+        title={`${service.name} connected`}
+      >
+        <span className="w-1.5 h-1.5 rounded-full bg-green-500" />
+        {service.name}
+      </span>
+    );
+  }
+
+  return (
+    <button
+      onClick={handleConnect}
+      className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium bg-neutral-100 text-neutral-600 hover:bg-neutral-200 dark:bg-neutral-800 dark:text-neutral-400 dark:hover:bg-neutral-700 transition-colors"
+      title={`Connect ${service.name}`}
+    >
+      <span className="w-1.5 h-1.5 rounded-full bg-neutral-400" />
+      {service.name}
+    </button>
+  );
+}
+
+export function ServiceConnectionsCard({ services, className = "" }: ServiceConnectionsProps) {
+  const [status, setStatus] = useState<Record<string, boolean>>({});
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    async function checkStatus() {
+      try {
+        const res = await fetch("/api/auth/status");
+        if (res.ok) {
+          const data = await res.json();
+          setStatus(data.services || {});
+        }
+      } catch (err) {
+        console.error("Failed to check service status:", err);
+      } finally {
+        setLoading(false);
+      }
+    }
+    checkStatus();
+  }, []);
+
+  const servicesWithStatus: Service[] = services.map((s) => ({
+    ...s,
+    connected: status[s.id] ?? false,
+  }));
+
+  const disconnectedServices = servicesWithStatus.filter((s) => !s.connected);
+
+  if (loading || disconnectedServices.length === 0) {
+    return null;
+  }
+
+  return (
+    <div
+      className={`rounded-lg border border-amber-200 dark:border-amber-900/50 bg-amber-50 dark:bg-amber-900/20 p-4 ${className}`}
+    >
+      <h3 className="font-medium text-amber-900 dark:text-amber-200 mb-2">
+        Connect your services
+      </h3>
+      <p className="text-sm text-amber-700 dark:text-amber-300/80 mb-3">
+        Connect the following services to unlock all features:
+      </p>
+      <div className="flex flex-wrap gap-2">
+        {disconnectedServices.map((service) => (
+          <a
+            key={service.id}
+            href={service.authUrl}
+            className="inline-flex items-center gap-2 px-3 py-1.5 rounded-md text-sm font-medium bg-amber-100 text-amber-800 hover:bg-amber-200 dark:bg-amber-900/40 dark:text-amber-200 dark:hover:bg-amber-900/60 transition-colors"
+          >
+            Connect {service.name}
+          </a>
+        ))}
+      </div>
+    </div>
+  );
+}

package/dist/integrations/_base/files/lib/token-store.ts

@@ -21,7 +21,11 @@ export interface TokenStore {
 }
 
 // In-memory storage for development
-const tokens = new Map<string, OAuthToken>();
+// Use globalThis to share across esbuild bundles (each API route is bundled separately)
+const TOKENS_KEY = "__veryfront_oauth_tokens__";
+// deno-lint-ignore no-explicit-any
+const globalStore = globalThis as any;
+const tokens: Map<string, OAuthToken> = globalStore[TOKENS_KEY] ||= new Map<string, OAuthToken>();
 
 function getKey(userId: string, service: string): string {
   return `${userId}:${service}`;

package/dist/integrations/calendar/connector.json

@@ -12,7 +12,13 @@
       "https://www.googleapis.com/auth/calendar.readonly",
       "https://www.googleapis.com/auth/calendar.events"
     ],
-    "callbackPath": "/api/auth/calendar/callback"
+    "callbackPath": "/api/auth/calendar/callback",
+    "requiredApis": [
+      {
+        "name": "Google Calendar API",
+        "enableUrl": "https://console.cloud.google.com/apis/library/calendar-json.googleapis.com"
+      }
+    ]
   },
   "envVars": [
     {

package/dist/integrations/calendar/files/_env.example

@@ -0,0 +1,29 @@
+# =============================================================================
+# Google Calendar Integration Setup
+# =============================================================================
+#
+# STEP 1: Create a Google Cloud Project
+#   Visit: https://console.cloud.google.com/projectcreate
+#
+# STEP 2: Enable the Google Calendar API
+#   Visit: https://console.cloud.google.com/apis/library/calendar-json.googleapis.com
+#   Click "Enable" to activate the Calendar API for your project
+#
+# STEP 3: Configure OAuth Consent Screen
+#   Visit: https://console.cloud.google.com/apis/credentials/consent
+#   - Choose "External" user type (or "Internal" for Workspace)
+#   - Fill in app name, support email
+#   - Add scopes: calendar.readonly, calendar.events
+#   - Add your email as a test user (required for development)
+#
+# STEP 4: Create OAuth Credentials
+#   Visit: https://console.cloud.google.com/apis/credentials
+#   - Click "Create Credentials" > "OAuth client ID"
+#   - Application type: "Web application"
+#   - Add Authorized redirect URI: http://localhost:3000/api/auth/calendar/callback
+#   - Copy the Client ID and Client Secret below
+#
+# =============================================================================
+
+GOOGLE_CLIENT_ID=your-client-id.apps.googleusercontent.com
+GOOGLE_CLIENT_SECRET=your-client-secret

package/dist/integrations/calendar/files/ai/tools/create-event.ts

@@ -37,12 +37,8 @@ export default tool({
     { title, startTime, endTime, description, location, attendees, timeZone },
     context,
   ) => {
-    const userId = context?.userId as string | undefined;
-    if (!userId) {
-      return {
-        error: "User not authenticated. Please log in first.",
-      };
-    }
+    // Default to "current-user" for development; in production, always pass userId from session
+    const userId = (context?.userId as string | undefined) || "current-user";
 
     try {
       const calendar = createCalendarClient(userId);

package/dist/integrations/calendar/files/ai/tools/find-free-time.ts

@@ -24,12 +24,8 @@ export default tool({
       .describe("Only show slots during working hours (9 AM - 6 PM)"),
   }),
   execute: async ({ durationMinutes, daysToSearch, workingHoursOnly }, context) => {
-    const userId = context?.userId as string | undefined;
-    if (!userId) {
-      return {
-        error: "User not authenticated. Please log in first.",
-      };
-    }
+    // Default to "current-user" for development; in production, always pass userId from session
+    const userId = (context?.userId as string | undefined) || "current-user";
 
     try {
       const calendar = createCalendarClient(userId);

package/dist/integrations/calendar/files/ai/tools/list-events.ts

@@ -24,12 +24,8 @@ export default tool({
       .describe("Only show events for today"),
   }),
   execute: async ({ maxResults, daysAhead, todayOnly }, context) => {
-    const userId = context?.userId as string | undefined;
-    if (!userId) {
-      return {
-        error: "User not authenticated. Please log in first.",
-      };
-    }
+    // Default to "current-user" for development; in production, always pass userId from session
+    const userId = (context?.userId as string | undefined) || "current-user";
 
     try {
       const calendar = createCalendarClient(userId);

package/dist/integrations/calendar/files/lib/token-store.ts

@@ -21,7 +21,11 @@ export interface TokenStore {
 }
 
 // In-memory storage for development
-const tokens = new Map<string, OAuthToken>();
+// Use globalThis to share across esbuild bundles (each API route is bundled separately)
+const TOKENS_KEY = "__veryfront_oauth_tokens__";
+// deno-lint-ignore no-explicit-any
+const globalStore = globalThis as any;
+const tokens: Map<string, OAuthToken> = globalStore[TOKENS_KEY] ||= new Map<string, OAuthToken>();
 
 function getKey(userId: string, service: string): string {
   return `${userId}:${service}`;

package/dist/integrations/github/files/ai/tools/create-issue.ts

@@ -27,12 +27,8 @@ export default tool({
       .describe("GitHub usernames to assign to the issue"),
   }),
   execute: async ({ repo, title, body, labels, assignees }, context) => {
-    const userId = context?.userId as string | undefined;
-    if (!userId) {
-      return {
-        error: "User not authenticated. Please log in first.",
-      };
-    }
+    // Default to "current-user" for development; in production, always pass userId from session
+    const userId = (context?.userId as string | undefined) || "current-user";
 
     const [owner, repoName] = repo.split("/");
     if (!owner || !repoName) {

package/dist/integrations/github/files/ai/tools/get-pr-diff.ts

@@ -16,12 +16,8 @@ export default tool({
       .describe("Pull request number"),
   }),
   execute: async ({ repo, prNumber }, context) => {
-    const userId = context?.userId as string | undefined;
-    if (!userId) {
-      return {
-        error: "User not authenticated. Please log in first.",
-      };
-    }
+    // Default to "current-user" for development; in production, always pass userId from session
+    const userId = (context?.userId as string | undefined) || "current-user";
 
     const [owner, repoName] = repo.split("/");
     if (!owner || !repoName) {

package/dist/integrations/github/files/ai/tools/list-prs.ts

@@ -21,12 +21,8 @@ export default tool({
       .describe("Maximum number of pull requests to return"),
   }),
   execute: async ({ repo, state, limit }, context) => {
-    const userId = context?.userId as string | undefined;
-    if (!userId) {
-      return {
-        error: "User not authenticated. Please log in first.",
-      };
-    }
+    // Default to "current-user" for development; in production, always pass userId from session
+    const userId = (context?.userId as string | undefined) || "current-user";
 
     const [owner, repoName] = repo.split("/");
     if (!owner || !repoName) {

package/dist/integrations/github/files/ai/tools/list-repos.ts

@@ -22,12 +22,8 @@ export default tool({
       .describe("Maximum number of repositories to return"),
   }),
   execute: async ({ type, sort, limit }, context) => {
-    const userId = context?.userId as string | undefined;
-    if (!userId) {
-      return {
-        error: "User not authenticated. Please log in first.",
-      };
-    }
+    // Default to "current-user" for development; in production, always pass userId from session
+    const userId = (context?.userId as string | undefined) || "current-user";
 
     try {
       const github = createGitHubClient(userId);

package/dist/integrations/github/files/lib/token-store.ts

@@ -21,7 +21,11 @@ export interface TokenStore {
 }
 
 // In-memory storage for development
-const tokens = new Map<string, OAuthToken>();
+// Use globalThis to share across esbuild bundles (each API route is bundled separately)
+const TOKENS_KEY = "__veryfront_oauth_tokens__";
+// deno-lint-ignore no-explicit-any
+const globalStore = globalThis as any;
+const tokens: Map<string, OAuthToken> = globalStore[TOKENS_KEY] ||= new Map<string, OAuthToken>();
 
 function getKey(userId: string, service: string): string {
   return `${userId}:${service}`;

package/dist/integrations/gmail/connector.json

@@ -13,7 +13,13 @@
       "https://www.googleapis.com/auth/gmail.send",
       "https://www.googleapis.com/auth/gmail.modify"
     ],
-    "callbackPath": "/api/auth/gmail/callback"
+    "callbackPath": "/api/auth/gmail/callback",
+    "requiredApis": [
+      {
+        "name": "Gmail API",
+        "enableUrl": "https://console.cloud.google.com/apis/library/gmail.googleapis.com"
+      }
+    ]
   },
   "envVars": [
     {

package/dist/integrations/gmail/files/_env.example

@@ -0,0 +1,29 @@
+# =============================================================================
+# Gmail Integration Setup
+# =============================================================================
+#
+# STEP 1: Create a Google Cloud Project
+#   Visit: https://console.cloud.google.com/projectcreate
+#
+# STEP 2: Enable the Gmail API
+#   Visit: https://console.cloud.google.com/apis/library/gmail.googleapis.com
+#   Click "Enable" to activate the Gmail API for your project
+#
+# STEP 3: Configure OAuth Consent Screen
+#   Visit: https://console.cloud.google.com/apis/credentials/consent
+#   - Choose "External" user type (or "Internal" for Workspace)
+#   - Fill in app name, support email
+#   - Add scopes: gmail.readonly, gmail.send, gmail.modify
+#   - Add your email as a test user (required for development)
+#
+# STEP 4: Create OAuth Credentials
+#   Visit: https://console.cloud.google.com/apis/credentials
+#   - Click "Create Credentials" > "OAuth client ID"
+#   - Application type: "Web application"
+#   - Add Authorized redirect URI: http://localhost:3000/api/auth/gmail/callback
+#   - Copy the Client ID and Client Secret below
+#
+# =============================================================================
+
+GOOGLE_CLIENT_ID=your-client-id.apps.googleusercontent.com
+GOOGLE_CLIENT_SECRET=your-client-secret

package/dist/integrations/gmail/files/ai/tools/list-emails.ts

@@ -23,12 +23,8 @@ export default tool({
       .describe("Filter by Gmail label (e.g., 'INBOX', 'IMPORTANT', 'STARRED')"),
   }),
   execute: async ({ maxResults, unreadOnly, label }, context) => {
-    const userId = context?.userId as string | undefined;
-    if (!userId) {
-      return {
-        error: "User not authenticated. Please log in first.",
-      };
-    }
+    // Default to "current-user" for development; in production, always pass userId from session
+    const userId = (context?.userId as string | undefined) || "current-user";
 
     try {
       const gmail = createGmailClient(userId);

package/dist/integrations/gmail/files/ai/tools/search-emails.ts

@@ -21,12 +21,8 @@ export default tool({
       .describe("Maximum number of results to return"),
   }),
   execute: async ({ query, maxResults }, context) => {
-    const userId = context?.userId as string | undefined;
-    if (!userId) {
-      return {
-        error: "User not authenticated. Please log in first.",
-      };
-    }
+    // Default to "current-user" for development; in production, always pass userId from session
+    const userId = (context?.userId as string | undefined) || "current-user";
 
     try {
       const gmail = createGmailClient(userId);

package/dist/integrations/gmail/files/ai/tools/send-email.ts

@@ -31,12 +31,8 @@ export default tool({
       .describe("Whether the body contains HTML"),
   }),
   execute: async ({ to, subject, body, cc, bcc, isHtml }, context) => {
-    const userId = context?.userId as string | undefined;
-    if (!userId) {
-      return {
-        error: "User not authenticated. Please log in first.",
-      };
-    }
+    // Default to "current-user" for development; in production, always pass userId from session
+    const userId = (context?.userId as string | undefined) || "current-user";
 
     try {
       const gmail = createGmailClient(userId);

package/dist/integrations/gmail/files/lib/token-store.ts

@@ -21,7 +21,11 @@ export interface TokenStore {
 }
 
 // In-memory storage for development
-const tokens = new Map<string, OAuthToken>();
+// Use globalThis to share across esbuild bundles (each API route is bundled separately)
+const TOKENS_KEY = "__veryfront_oauth_tokens__";
+// deno-lint-ignore no-explicit-any
+const globalStore = globalThis as any;
+const tokens: Map<string, OAuthToken> = globalStore[TOKENS_KEY] ||= new Map<string, OAuthToken>();
 
 function getKey(userId: string, service: string): string {
   return `${userId}:${service}`;

package/dist/integrations/slack/files/ai/tools/get-messages.ts

@@ -17,12 +17,8 @@ export default tool({
       .describe("Maximum number of messages to return"),
   }),
   execute: async ({ channel, limit }, context) => {
-    const userId = context?.userId as string | undefined;
-    if (!userId) {
-      return {
-        error: "User not authenticated. Please log in first.",
-      };
-    }
+    // Default to "current-user" for development; in production, always pass userId from session
+    const userId = (context?.userId as string | undefined) || "current-user";
 
     try {
       const slack = createSlackClient(userId);

package/dist/integrations/slack/files/ai/tools/list-channels.ts

@@ -18,12 +18,8 @@ export default tool({
       .describe("Exclude archived channels"),
   }),
   execute: async ({ limit, excludeArchived }, context) => {
-    const userId = context?.userId as string | undefined;
-    if (!userId) {
-      return {
-        error: "User not authenticated. Please log in first.",
-      };
-    }
+    // Default to "current-user" for development; in production, always pass userId from session
+    const userId = (context?.userId as string | undefined) || "current-user";
 
     try {
       const slack = createSlackClient(userId);

package/dist/integrations/slack/files/ai/tools/send-message.ts

@@ -19,12 +19,8 @@ export default tool({
       .describe("Thread timestamp to reply to (for threaded messages)"),
   }),
   execute: async ({ channel, text, threadTs }, context) => {
-    const userId = context?.userId as string | undefined;
-    if (!userId) {
-      return {
-        error: "User not authenticated. Please log in first.",
-      };
-    }
+    // Default to "current-user" for development; in production, always pass userId from session
+    const userId = (context?.userId as string | undefined) || "current-user";
 
     try {
       const slack = createSlackClient(userId);

package/dist/integrations/slack/files/lib/token-store.ts

@@ -21,7 +21,11 @@ export interface TokenStore {
 }
 
 // In-memory storage for development
-const tokens = new Map<string, OAuthToken>();
+// Use globalThis to share across esbuild bundles (each API route is bundled separately)
+const TOKENS_KEY = "__veryfront_oauth_tokens__";
+// deno-lint-ignore no-explicit-any
+const globalStore = globalThis as any;
+const tokens: Map<string, OAuthToken> = globalStore[TOKENS_KEY] ||= new Map<string, OAuthToken>();
 
 function getKey(userId: string, service: string): string {
   return `${userId}:${service}`;

package/dist/templates/ai/app/api/chat/route.ts

@@ -20,7 +20,14 @@ export async function POST(request: Request) {
       return Response.json({ error: "Agent not found" }, { status: 404 });
     }
 
-    const result = await agent.stream({ messages });
+    // In production, extract userId from session/cookie
+    // For development, we use a default user
+    const userId = "current-user";
+
+    const result = await agent.stream({
+      messages,
+      context: { userId },
+    });
     return result.toDataStreamResponse();
   } catch (error) {
     if (error instanceof z.ZodError) {

package/dist/templates/ai/app/page.tsx

@@ -8,15 +8,16 @@ export default function ChatPage() {
 
   return (
     <div className="flex flex-col h-screen bg-white dark:bg-neutral-900">
-      {/* Header - minimal */}
-      <header className="flex-shrink-0 border-b border-neutral-200 dark:border-neutral-800">
-        <div className="max-w-2xl mx-auto px-4 py-3 flex items-center justify-center">
+      {/* Header - sticky at top, full width */}
+      <header className="sticky top-0 z-10 flex-shrink-0 border-b border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900">
+        <div className="px-4 py-3 flex items-center justify-between">
           <h1 className="font-medium text-neutral-900 dark:text-white">AI Assistant</h1>
+          {/* Add ServiceConnections here when integrations are added */}
         </div>
       </header>
 
-      {/* Chat */}
-      <Chat {...chat} className="flex-1" placeholder="Message" />
+      {/* Chat - fills remaining space with scrollable content */}
+      <Chat {...chat} className="flex-1 min-h-0" placeholder="Message" />
     </div>
   )
 }

package/dist/templates/ai/tsconfig.json

@@ -11,6 +11,7 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
+    "allowImportingTsExtensions": true,
     "lib": ["DOM", "DOM.Iterable", "ES2020"]
   },
   "include": ["**/*.ts", "**/*.tsx"],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "veryfront",
-  "version": "0.0.46",
+  "version": "0.0.48",
   "description": "Zero-config React meta-framework for building agentic AI applications",
   "type": "module",
   "main": "./dist/index.js",