veryfront 0.0.50 → 0.0.52

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

@@ -5,7 +5,7 @@
  * Used by the setup guide to show which services are connected.
  */
 
-import { tokenStore } from "../../../../lib/token-store.ts";
+import { tokenStore } from "../../../../lib/token-store";
 
 // Define available integrations - will be populated based on project config
 const INTEGRATIONS = [
@@ -23,12 +23,12 @@ export async function GET(_req: Request) {
 
   const statuses = await Promise.all(
     INTEGRATIONS.map(async (integration) => {
-      const token = await tokenStore.getToken(userId, integration.id);
+      const connected = await tokenStore.isConnected(userId, integration.id);
       return {
         id: integration.id,
         name: integration.name,
         icon: integration.icon,
-        connected: !!token,
+        connected,
         connectUrl: `/api/auth/${integration.id}`,
       };
     }),

package/dist/integrations/_base/files/app/api/integrations/token-storage/route.ts

@@ -2,13 +2,25 @@
  * Token Storage Status API
  *
  * Returns the current token storage mode and encryption status.
+ * This endpoint is self-contained to work with any version of token-store.
  */
 
-import { getStorageMode, isEncryptionEnabled } from "../../../../lib/token-store";
-
 export async function GET() {
-  return Response.json({
-    mode: getStorageMode(),
-    encrypted: isEncryptionEnabled(),
-  });
+  // Detect storage mode from environment variables
+  const env = process.env;
+  let mode: "memory" | "database" | "kv" | "redis" = "memory";
+
+  if (env.DATABASE_URL) {
+    mode = "database";
+  } else if (env.KV_REST_API_URL) {
+    mode = "kv";
+  } else if (env.REDIS_URL) {
+    mode = "redis";
+  }
+
+  // Check if encryption is enabled
+  const encryptionKey = env.TOKEN_ENCRYPTION_KEY;
+  const encrypted = typeof encryptionKey === "string" && encryptionKey.length === 64;
+
+  return Response.json({ mode, encrypted });
 }

package/dist/integrations/_base/files/app/page.tsx

@@ -0,0 +1,128 @@
+'use client'
+
+import { Chat } from 'veryfront/ai/components'
+import { useChat } from 'veryfront/ai/react'
+import { ServiceConnections } from './components/ServiceConnections'
+
+// Define services for this project - automatically populated by scaffolding
+// Each integration adds its service here when installed
+const SERVICES = [
+  // Services will be dynamically populated based on installed integrations
+  // For now, we fetch from the status API instead
+]
+
+export default function ChatPage() {
+  const chat = useChat({ api: '/api/chat' })
+
+  return (
+    <div className="flex flex-col h-screen bg-white dark:bg-neutral-900">
+      {/* 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>
+          <div className="flex items-center gap-4">
+            <IntegrationStatus />
+            <a
+              href="/setup"
+              className="text-sm text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200"
+            >
+              Setup
+            </a>
+          </div>
+        </div>
+      </header>
+
+      {/* Chat - fills remaining space with scrollable content */}
+      <Chat {...chat} className="flex-1 min-h-0" placeholder="Message" />
+    </div>
+  )
+}
+
+// Component to show integration status from the API
+function IntegrationStatus() {
+  // Note: ServiceConnections fetches from /api/auth/status
+  // We'll use the integrations/status API which has the full list
+  return <ServiceStatusFromAPI />
+}
+
+import { useEffect, useState } from 'react'
+
+interface Integration {
+  id: string
+  name: string
+  connected: boolean
+  connectUrl: string
+}
+
+function ServiceStatusFromAPI() {
+  const [integrations, setIntegrations] = useState<Integration[]>([])
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    async function fetchStatus() {
+      try {
+        const res = await fetch('/api/integrations/status')
+        if (res.ok) {
+          const data = await res.json()
+          setIntegrations(data.integrations || [])
+        }
+      } catch (error) {
+        console.error('Failed to fetch integration status:', error)
+      } finally {
+        setLoading(false)
+      }
+    }
+    fetchStatus()
+  }, [])
+
+  if (loading) {
+    return (
+      <div className="flex items-center gap-2">
+        <div className="animate-pulse h-6 w-24 bg-neutral-200 dark:bg-neutral-700 rounded-full" />
+      </div>
+    )
+  }
+
+  if (integrations.length === 0) {
+    return null
+  }
+
+  const connected = integrations.filter(i => i.connected)
+  const disconnected = integrations.filter(i => !i.connected)
+
+  return (
+    <div className="flex items-center gap-2">
+      {/* Show connected services as green badges */}
+      {connected.map(service => (
+        <span
+          key={service.id}
+          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>
+      ))}
+
+      {/* Show disconnected services as clickable grey badges */}
+      {disconnected.map(service => (
+        <a
+          key={service.id}
+          href={service.connectUrl}
+          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}
+        </a>
+      ))}
+
+      {/* Show count if not all connected */}
+      {disconnected.length > 0 && (
+        <span className="text-xs text-neutral-500 dark:text-neutral-400">
+          {connected.length}/{integrations.length}
+        </span>
+      )}
+    </div>
+  )
+}

package/dist/integrations/_base/files/app/setup/page.tsx

@@ -719,10 +719,16 @@ export default function SetupPage() {
   async function fetchStatus() {
     try {
       const res = await fetch("/api/integrations/status");
+      if (!res.ok) {
+        console.error("Failed to fetch integration status:", res.status);
+        setIntegrations([]);
+        return;
+      }
       const data = await res.json();
-      setIntegrations(data.integrations);
+      setIntegrations(data.integrations || []);
     } catch (error) {
       console.error("Failed to fetch integration status:", error);
+      setIntegrations([]);
     } finally {
       setLoading(false);
     }
@@ -731,6 +737,10 @@ export default function SetupPage() {
   async function fetchTokenStorage() {
     try {
       const res = await fetch("/api/integrations/token-storage");
+      if (!res.ok) {
+        setTokenStorage({ mode: "memory", encrypted: false });
+        return;
+      }
       const data = await res.json();
       setTokenStorage(data);
     } catch {

package/dist/integrations/gmail/files/lib/gmail-client.ts

@@ -46,18 +46,12 @@ const gmailService = new OAuthService(gmailConfig, memoryTokenStore);
  * Create a Gmail client for API operations
  */
 export function createGmailClient() {
+  // OAuthService.fetch() already handles auth, error checking, and JSON parsing
   async function apiRequest<T>(
     endpoint: string,
     options: RequestInit = {},
   ): Promise<T> {
-    const response = await gmailService.fetch(endpoint, options);
-
-    if (!response.ok) {
-      const error = await response.text();
-      throw new Error(`Gmail API error: ${response.status} - ${error}`);
-    }
-
-    return response.json();
+    return gmailService.fetch<T>(endpoint, options);
   }
 
   return {

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

@@ -12,7 +12,12 @@ export default function ChatPage() {
       <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 */}
+          <a
+            href="/setup"
+            className="text-sm text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200"
+          >
+            Setup
+          </a>
         </div>
       </header>
 

package/package.json

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

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

@@ -1,5 +0,0 @@
-/**
- * Airtable Token Store
- */
-
-export { memoryTokenStore as tokenStore, type OAuthTokens, type TokenStore } from "veryfront/oauth";

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

@@ -1,11 +0,0 @@
-/**
- * Asana Token Store
- */
-
-export { memoryTokenStore as tokenStore, type OAuthTokens, type TokenStore } from "veryfront/oauth";
-
-export async function getAccessToken(): Promise<string | null> {
-  const { tokenStore } = await import("./token-store.ts");
-  const tokens = await tokenStore.get("asana");
-  return tokens?.accessToken ?? null;
-}

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

@@ -1,5 +0,0 @@
-/**
- * Bitbucket Token Store
- */
-
-export { memoryTokenStore as tokenStore, type OAuthTokens, type TokenStore } from "veryfront/oauth";

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

@@ -1,11 +0,0 @@
-/**
- * Box Token Store
- */
-
-export { memoryTokenStore as tokenStore, type OAuthTokens, type TokenStore } from "veryfront/oauth";
-
-export async function getAccessToken(): Promise<string | null> {
-  const { tokenStore } = await import("./token-store.ts");
-  const tokens = await tokenStore.get("box");
-  return tokens?.accessToken ?? null;
-}

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

@@ -1,5 +0,0 @@
-/**
- * Calendar Token Store
- */
-
-export { memoryTokenStore as tokenStore, type OAuthTokens, type TokenStore } from "veryfront/oauth";

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

@@ -1,11 +0,0 @@
-/**
- * ClickUp Token Store
- */
-
-export { memoryTokenStore as tokenStore, type OAuthTokens, type TokenStore } from "veryfront/oauth";
-
-export async function getAccessToken(): Promise<string | null> {
-  const { tokenStore } = await import("./token-store.ts");
-  const tokens = await tokenStore.get("clickup");
-  return tokens?.accessToken ?? null;
-}

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

@@ -1,5 +0,0 @@
-/**
- * Confluence Token Store
- */
-
-export { memoryTokenStore as tokenStore, type OAuthTokens, type TokenStore } from "veryfront/oauth";

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

@@ -1,5 +0,0 @@
-/**
- * Discord Token Store
- */
-
-export { memoryTokenStore as tokenStore, type OAuthTokens, type TokenStore } from "veryfront/oauth";

package/dist/integrations/docs-google/files/lib/token-store.ts

@@ -1,5 +0,0 @@
-/**
- * Google Docs Token Store
- */
-
-export { memoryTokenStore as tokenStore, type OAuthTokens, type TokenStore } from "veryfront/oauth";

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

@@ -1,113 +0,0 @@
-/**
- * OAuth Token Store
- *
- * Simple in-memory token store for development.
- * Replace with a database or KV store for production.
- */
-
-export interface OAuthToken {
-  accessToken: string;
-  refreshToken?: string;
-  expiresAt?: number;
-  tokenType?: string;
-  scope?: string;
-}
-
-export interface TokenStore {
-  getToken(userId: string, service: string): Promise<OAuthToken | null>;
-  setToken(userId: string, service: string, token: OAuthToken): Promise<void>;
-  revokeToken(userId: string, service: string): Promise<void>;
-  isConnected(userId: string, service: string): Promise<boolean>;
-}
-
-// In-memory storage for development
-// 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}`;
-}
-
-/**
- * Simple in-memory token store
- *
- * NOTE: This is for development only. In production, use:
- * - Database (Postgres, SQLite, etc.)
- * - KV store (Cloudflare Workers KV, Vercel KV, etc.)
- * - Encrypted file storage
- */
-export const tokenStore: TokenStore = {
-  getToken(userId: string, service: string): Promise<OAuthToken | null> {
-    const key = getKey(userId, service);
-    return Promise.resolve(tokens.get(key) || null);
-  },
-
-  setToken(
-    userId: string,
-    service: string,
-    token: OAuthToken,
-  ): Promise<void> {
-    const key = getKey(userId, service);
-    tokens.set(key, token);
-    return Promise.resolve();
-  },
-
-  revokeToken(userId: string, service: string): Promise<void> {
-    const key = getKey(userId, service);
-    tokens.delete(key);
-    return Promise.resolve();
-  },
-
-  async isConnected(userId: string, service: string): Promise<boolean> {
-    const token = await this.getToken(userId, service);
-    if (!token) return false;
-    // Check if token is not expired (if no expiry, token doesn't expire)
-    return !token.expiresAt || token.expiresAt > Date.now();
-  },
-};
-
-/**
- * Factory function to create a custom token store
- */
-export function createTokenStore(options: {
-  get: (key: string) => Promise<string | null>;
-  set: (key: string, value: string) => Promise<void>;
-  delete: (key: string) => Promise<void>;
-}): TokenStore {
-  return {
-    async getToken(userId: string, service: string): Promise<OAuthToken | null> {
-      const key = getKey(userId, service);
-      const data = await options.get(key);
-      if (!data) return null;
-      try {
-        return JSON.parse(data) as OAuthToken;
-      } catch {
-        return null;
-      }
-    },
-
-    async setToken(
-      userId: string,
-      service: string,
-      token: OAuthToken,
-    ): Promise<void> {
-      const key = getKey(userId, service);
-      await options.set(key, JSON.stringify(token));
-    },
-
-    async revokeToken(userId: string, service: string): Promise<void> {
-      const key = getKey(userId, service);
-      await options.delete(key);
-    },
-
-    async isConnected(userId: string, service: string): Promise<boolean> {
-      const token = await this.getToken(userId, service);
-      if (!token) return false;
-      // Check if token is not expired (if no expiry, token doesn't expire)
-      return !token.expiresAt || token.expiresAt > Date.now();
-    },
-  };
-}

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

@@ -1,5 +0,0 @@
-/**
- * Dropbox Token Store
- */
-
-export { memoryTokenStore as tokenStore, type OAuthTokens, type TokenStore } from "veryfront/oauth";

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

@@ -1,5 +0,0 @@
-/**
- * Figma Token Store
- */
-
-export { memoryTokenStore as tokenStore, type OAuthTokens, type TokenStore } from "veryfront/oauth";

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

@@ -1,11 +0,0 @@
-/**
- * Freshdesk Token Store
- */
-
-export { memoryTokenStore as tokenStore, type OAuthTokens, type TokenStore } from "veryfront/oauth";
-
-export async function getAccessToken(): Promise<string | null> {
-  const { tokenStore } = await import("./token-store.ts");
-  const tokens = await tokenStore.get("freshdesk");
-  return tokens?.accessToken ?? null;
-}

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

@@ -1,5 +0,0 @@
-/**
- * GitHub Token Store
- */
-
-export { memoryTokenStore as tokenStore, type OAuthTokens, type TokenStore } from "veryfront/oauth";

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

@@ -1,5 +0,0 @@
-/**
- * GitLab Token Store
- */
-
-export { memoryTokenStore as tokenStore, type OAuthTokens, type TokenStore } from "veryfront/oauth";

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

@@ -1,8 +0,0 @@
-/**
- * Gmail Token Store
- *
- * Re-exports the shared memory token store from veryfront/oauth.
- * Replace with a custom implementation for production (database, KV, etc.)
- */
-
-export { memoryTokenStore as tokenStore, type OAuthTokens, type TokenStore } from "veryfront/oauth";

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

@@ -1,5 +0,0 @@
-/**
- * HubSpot Token Store
- */
-
-export { memoryTokenStore as tokenStore, type OAuthTokens, type TokenStore } from "veryfront/oauth";

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

@@ -1,11 +0,0 @@
-/**
- * Intercom Token Store
- */
-
-export { memoryTokenStore as tokenStore, type OAuthTokens, type TokenStore } from "veryfront/oauth";
-
-export async function getAccessToken(): Promise<string | null> {
-  const { tokenStore } = await import("./token-store.ts");
-  const tokens = await tokenStore.get("intercom");
-  return tokens?.accessToken ?? null;
-}

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

@@ -1,5 +0,0 @@
-/**
- * Jira Token Store
- */
-
-export { memoryTokenStore as tokenStore, type OAuthTokens, type TokenStore } from "veryfront/oauth";

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

@@ -1,5 +0,0 @@
-/**
- * Linear Token Store
- */
-
-export { memoryTokenStore as tokenStore, type OAuthTokens, type TokenStore } from "veryfront/oauth";

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

@@ -1,11 +0,0 @@
-/**
- * Mailchimp Token Store
- */
-
-export { memoryTokenStore as tokenStore, type OAuthTokens, type TokenStore } from "veryfront/oauth";
-
-export async function getAccessToken(): Promise<string | null> {
-  const { tokenStore } = await import("./token-store.ts");
-  const tokens = await tokenStore.get("mailchimp");
-  return tokens?.accessToken ?? null;
-}

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

@@ -1,43 +0,0 @@
-// In-memory token store for development
-// For production, replace with a secure database-backed implementation
-
-let projectToken: string | null = null;
-let apiSecret: string | null = null;
-let projectId: string | null = null;
-
-export function setProjectToken(token: string): void {
-  projectToken = token;
-}
-
-export function getProjectToken(): string | null {
-  // Try environment variable first, then in-memory store
-  return process.env.MIXPANEL_PROJECT_TOKEN || projectToken;
-}
-
-export function setApiSecret(secret: string): void {
-  apiSecret = secret;
-}
-
-export function getApiSecret(): string | null {
-  // Try environment variable first, then in-memory store
-  return process.env.MIXPANEL_API_SECRET || apiSecret;
-}
-
-export function setProjectId(id: string): void {
-  projectId = id;
-}
-
-export function getProjectId(): string | null {
-  // Try environment variable first, then in-memory store
-  return process.env.MIXPANEL_PROJECT_ID || projectId;
-}
-
-export function clearTokens(): void {
-  projectToken = null;
-  apiSecret = null;
-  projectId = null;
-}
-
-export function isAuthenticated(): boolean {
-  return getProjectToken() !== null && getApiSecret() !== null && getProjectId() !== null;
-}

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

@@ -1,11 +0,0 @@
-/**
- * Monday.com Token Store
- */
-
-export { memoryTokenStore as tokenStore, type OAuthTokens, type TokenStore } from "veryfront/oauth";
-
-export async function getAccessToken(): Promise<string | null> {
-  const { tokenStore } = await import("./token-store.ts");
-  const tokens = await tokenStore.get("monday");
-  return tokens?.accessToken ?? null;
-}

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

@@ -1,29 +0,0 @@
-// In-memory token store for development
-// For production, replace with a database-backed implementation
-
-interface TokenData {
-  apiKey: string;
-  databaseUrl?: string;
-}
-
-let tokenStore: TokenData | null = null;
-
-export function setApiKey(apiKey: string, databaseUrl?: string): void {
-  tokenStore = { apiKey, databaseUrl };
-}
-
-export function getApiKey(): string | null {
-  return tokenStore?.apiKey || null;
-}
-
-export function getDatabaseUrl(): string | null {
-  return tokenStore?.databaseUrl || process.env.DATABASE_URL || null;
-}
-
-export function clearTokens(): void {
-  tokenStore = null;
-}
-
-export function isAuthenticated(): boolean {
-  return tokenStore !== null && tokenStore.apiKey !== null;
-}

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

@@ -1,5 +0,0 @@
-/**
- * Notion Token Store
- */
-
-export { memoryTokenStore as tokenStore, type OAuthTokens, type TokenStore } from "veryfront/oauth";

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

@@ -1,5 +0,0 @@
-/**
- * OneDrive Token Store
- */
-
-export { memoryTokenStore as tokenStore, type OAuthTokens, type TokenStore } from "veryfront/oauth";

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

@@ -1,5 +0,0 @@
-/**
- * Outlook Token Store
- */
-
-export { memoryTokenStore as tokenStore, type OAuthTokens, type TokenStore } from "veryfront/oauth";