veryfront 0.1.13 → 0.1.14

package/src/src/proxy/server-resolver.ts

@@ -0,0 +1,151 @@
+/**
+ * Dedicated Server Resolver
+ *
+ * Resolves an environment ID to a dedicated server hostname.
+ * Used by the proxy to route traffic to dedicated servers instead of the shared pool.
+ *
+ * Caches results in memory with a short TTL to avoid hitting the API on every request.
+ * A null result (no dedicated server) is also cached to prevent repeated lookups.
+ */
+import * as dntShim from "../../_dnt.shims.js";
+
+
+import { proxyLogger } from "./logger.js";
+import { unrefTimer } from "../platform/compat/process.js";
+
+const logger = proxyLogger.child({ module: "server-resolver" });
+
+interface DedicatedServer {
+  id: string;
+  short_id: string;
+  hostname: string;
+  status: string;
+}
+
+interface CacheEntry {
+  server: DedicatedServer | null;
+  expiresAt: number;
+}
+
+/** Thrown when the API call fails (network error, non-OK status, parse error). */
+class ServerResolverError extends Error {
+  constructor(message: string, options?: { cause?: unknown }) {
+    super(message, options);
+  }
+}
+
+export class ServerResolver {
+  private cache = new Map<string, CacheEntry>();
+  private pending = new Map<string, Promise<DedicatedServer | null>>();
+  private cleanupTimer: ReturnType<typeof dntShim.setInterval> | null = null;
+
+  constructor(
+    private apiInternalUrl: string,
+    private apiUser: string,
+    private apiPass: string,
+    private cacheTtlMs: number = 30_000,
+  ) {
+    // Cleanup expired entries every 60s
+    this.cleanupTimer = dntShim.setInterval(() => this.cleanup(), 60_000);
+    // Don't keep the process alive for cleanup
+    unrefTimer(this.cleanupTimer);
+  }
+
+  /**
+   * Resolve an environment ID to a dedicated server URL, or null for shared pool.
+   */
+  async resolve(environmentId: string | undefined): Promise<string | null> {
+    if (!environmentId) return null;
+
+    const cached = this.cache.get(environmentId);
+    if (cached && Date.now() < cached.expiresAt) {
+      return cached.server ? `http://${cached.server.hostname}` : null;
+    }
+
+    // Deduplicate concurrent requests for the same environment
+    const inflight = this.pending.get(environmentId);
+    if (inflight) {
+      const server = await inflight;
+      return server ? `http://${server.hostname}` : null;
+    }
+
+    const promise = this.fetchServer(environmentId);
+    this.pending.set(environmentId, promise);
+
+    try {
+      const server = await promise;
+      // Only cache successful API responses (server found OR explicit "no server").
+      // Transient errors (network failures, non-OK status) are NOT cached so the
+      // next request retries the API instead of suppressing dedicated routing.
+      this.cache.set(environmentId, {
+        server,
+        expiresAt: Date.now() + this.cacheTtlMs,
+      });
+      return server ? `http://${server.hostname}` : null;
+    } catch (error) {
+      // API error — don't cache, fall back to shared pool for this request
+      logger.warn("[ServerResolver] Transient error, skipping cache", {
+        environmentId,
+        error: error instanceof Error ? error.message : String(error),
+      });
+      return null;
+    } finally {
+      this.pending.delete(environmentId);
+    }
+  }
+
+  close(): void {
+    if (this.cleanupTimer) {
+      clearInterval(this.cleanupTimer);
+      this.cleanupTimer = null;
+    }
+    this.cache.clear();
+  }
+
+  /**
+   * Fetch dedicated server from API.
+   * Returns DedicatedServer | null on success (null = no dedicated server assigned).
+   * Throws ServerResolverError on transient failures (network, non-OK status).
+   */
+  private async fetchServer(environmentId: string): Promise<DedicatedServer | null> {
+    const url = `${this.apiInternalUrl}/internal/environment-server?environmentId=${
+      encodeURIComponent(environmentId)
+    }`;
+    const headers: Record<string, string> = { Accept: "application/json" };
+
+    if (this.apiUser && this.apiPass) {
+      headers.Authorization = `Basic ${btoa(`${this.apiUser}:${this.apiPass}`)}`;
+    }
+
+    let response: dntShim.Response;
+    try {
+      response = await dntShim.fetch(url, { headers, signal: AbortSignal.timeout(5_000) });
+    } catch (error) {
+      throw new ServerResolverError(
+        `Failed to reach API: ${error instanceof Error ? error.message : String(error)}`,
+        { cause: error },
+      );
+    }
+
+    if (!response.ok) {
+      await response.body?.cancel();
+      throw new ServerResolverError(`API returned ${response.status} for ${environmentId}`);
+    }
+
+    const data = (await response.json()) as { server: DedicatedServer | null };
+    if (data.server) {
+      logger.debug("[ServerResolver] Resolved dedicated server", {
+        environmentId,
+        hostname: data.server.hostname,
+      });
+    }
+    return data.server;
+  }
+
+  private cleanup(): void {
+    const now = Date.now();
+    for (const [key, entry] of this.cache) {
+      if (now >= entry.expiresAt) this.cache.delete(key);
+    }
+  }
+}

package/src/src/react/components/ai/chat/components/inference-badge.tsx

@@ -0,0 +1,48 @@
+import * as React from "react";
+import type { BrowserInferenceStatus, InferenceMode } from "../../../../../agent/react/index.js";
+
+export interface InferenceBadgeProps {
+  inferenceMode: InferenceMode;
+  browserStatus?: BrowserInferenceStatus | null;
+}
+
+export function InferenceBadge({
+  inferenceMode,
+  browserStatus,
+}: InferenceBadgeProps): React.ReactElement | null {
+  if (inferenceMode === "cloud") return null;
+
+  let label: string;
+  let dotColor: string;
+  let showProgress = false;
+
+  if (inferenceMode === "server-local") {
+    label = "Running locally";
+    dotColor = "bg-green-500";
+  } else if (browserStatus === "downloading-model") {
+    label = "Downloading model...";
+    dotColor = "bg-amber-500";
+    showProgress = true;
+  } else if (browserStatus === "loading-runtime") {
+    label = "Loading AI runtime...";
+    dotColor = "bg-amber-500";
+  } else if (browserStatus === "generating") {
+    label = "Running in browser";
+    dotColor = "bg-green-500";
+  } else if (browserStatus === "error") {
+    label = "Local model failed";
+    dotColor = "bg-red-500";
+  } else {
+    label = "Running locally";
+    dotColor = "bg-green-500";
+  }
+
+  return (
+    <div className="flex items-center gap-1.5 px-3 py-1 text-xs text-neutral-500 dark:text-neutral-400">
+      <span
+        className={`size-1.5 rounded-full ${dotColor} ${showProgress ? "animate-pulse" : ""}`}
+      />
+      <span>{label}</span>
+    </div>
+  );
+}

package/src/src/react/components/ai/chat/components/upgrade-cta.tsx

@@ -0,0 +1,56 @@
+import * as React from "react";
+import type { InferenceMode } from "../../../../../agent/react/index.js";
+
+const DISMISS_KEY = "vf-upgrade-cta-dismissed";
+
+export interface UpgradeCTAProps {
+  inferenceMode: InferenceMode;
+}
+
+export function UpgradeCTA({ inferenceMode }: UpgradeCTAProps): React.ReactElement | null {
+  const [dismissed, setDismissed] = React.useState(() => {
+    try {
+      return localStorage.getItem(DISMISS_KEY) === "1";
+    } catch {
+      return false;
+    }
+  });
+
+  if (inferenceMode === "cloud" || dismissed) return null;
+
+  const handleDismiss = () => {
+    setDismissed(true);
+    try {
+      localStorage.setItem(DISMISS_KEY, "1");
+    } catch {
+      // localStorage may be unavailable
+    }
+  };
+
+  return (
+    <div className="w-full max-w-2xl mx-auto mt-4 px-4 py-3 bg-blue-50 dark:bg-blue-900/20 rounded-xl text-sm text-blue-700 dark:text-blue-300 flex items-start gap-3">
+      <span className="flex-1">
+        Using a lightweight local model. Add an API key to your{" "}
+        <code className="px-1 py-0.5 bg-blue-100 dark:bg-blue-900/40 rounded text-xs">.env</code>
+        {" "}
+        for GPT-4o or Claude.
+      </span>
+      <button
+        type="button"
+        onClick={handleDismiss}
+        className="text-blue-400 hover:text-blue-600 dark:hover:text-blue-200 transition-colors flex-shrink-0"
+        aria-label="Dismiss"
+      >
+        <svg
+          className="size-4"
+          viewBox="0 0 16 16"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+        >
+          <path d="M4 4l8 8M12 4l-8 8" />
+        </svg>
+      </button>
+    </div>
+  );
+}

package/src/src/react/components/ai/chat/index.tsx

@@ -7,7 +7,13 @@ import {
   SubmitButton,
 } from "../../../primitives/index.js";
 import { useVoiceInput } from "../../../../agent/react/index.js";
-import type { DynamicToolUIPart, ToolUIPart, UIMessage } from "../../../../agent/react/index.js";
+import type {
+  BrowserInferenceStatus,
+  DynamicToolUIPart,
+  InferenceMode,
+  ToolUIPart,
+  UIMessage,
+} from "../../../../agent/react/index.js";
 import { type ChatTheme, cn, defaultChatTheme, mergeThemes } from "../theme.js";
 import { Markdown } from "../markdown.js";
 import { MessageSquareIcon, RefreshCwIcon } from "../icons/index.js";
@@ -27,6 +33,8 @@ export {
 } from "./components/empty-state.js";
 export { MessageActions, type MessageActionsProps } from "./components/message-actions.js";
 export { ToolCallCard, ToolStatusBadge } from "./components/tool-ui.js";
+export { InferenceBadge, type InferenceBadgeProps } from "./components/inference-badge.js";
+export { UpgradeCTA, type UpgradeCTAProps } from "./components/upgrade-cta.js";
 
 export {
   getTextContent,
@@ -48,6 +56,8 @@ import {
 import { MessageActions } from "./components/message-actions.js";
 import { ReasoningCard } from "./components/reasoning.js";
 import { ToolCallCard } from "./components/tool-ui.js";
+import { InferenceBadge } from "./components/inference-badge.js";
+import { UpgradeCTA } from "./components/upgrade-cta.js";
 import { getTextContent, groupPartsInOrder } from "./utils/message-parts.js";
 
 export interface ChatProps {
@@ -86,6 +96,10 @@ export interface ChatProps {
   model?: string;
   /** Called when user changes model */
   onModelChange?: (model: string) => void;
+  /** Where inference is currently happening */
+  inferenceMode?: InferenceMode;
+  /** Browser-side model loading/inference status */
+  browserStatus?: BrowserInferenceStatus | null;
 }
 
 export const Chat = React.forwardRef<HTMLDivElement, ChatProps>(function Chat(
@@ -118,6 +132,8 @@ export const Chat = React.forwardRef<HTMLDivElement, ChatProps>(function Chat(
     models,
     model,
     onModelChange,
+    inferenceMode,
+    browserStatus,
   },
   ref,
 ): React.ReactElement {
@@ -172,6 +188,9 @@ export const Chat = React.forwardRef<HTMLDivElement, ChatProps>(function Chat(
                   </Suggestions>
                 </div>
               )}
+              {inferenceMode && inferenceMode !== "cloud" && (
+                <UpgradeCTA inferenceMode={inferenceMode} />
+              )}
               <div className="flex-1" />
             </div>
           )
@@ -239,11 +258,24 @@ export const Chat = React.forwardRef<HTMLDivElement, ChatProps>(function Chat(
               {isLoading && (
                 <div className="flex justify-start">
                   <div className="bg-neutral-100 dark:bg-neutral-800 rounded-[20px] rounded-bl-[4px] px-4 py-3">
-                    <div className="flex gap-1.5 items-center">
-                      <span className={cn(theme.loading)} />
-                      <span className={cn(theme.loading)} style={{ animationDelay: "0.15s" }} />
-                      <span className={cn(theme.loading)} style={{ animationDelay: "0.3s" }} />
-                    </div>
+                    {browserStatus === "downloading-model" || browserStatus === "loading-runtime"
+                      ? (
+                        <div className="flex items-center gap-2 text-xs text-neutral-500 dark:text-neutral-400">
+                          <span className="size-1.5 rounded-full bg-amber-500 animate-pulse" />
+                          <span>
+                            {browserStatus === "downloading-model"
+                              ? "Downloading model..."
+                              : "Loading AI..."}
+                          </span>
+                        </div>
+                      )
+                      : (
+                        <div className="flex gap-1.5 items-center">
+                          <span className={cn(theme.loading)} />
+                          <span className={cn(theme.loading)} style={{ animationDelay: "0.15s" }} />
+                          <span className={cn(theme.loading)} style={{ animationDelay: "0.3s" }} />
+                        </div>
+                      )}
                   </div>
                 </div>
               )}
@@ -278,6 +310,11 @@ export const Chat = React.forwardRef<HTMLDivElement, ChatProps>(function Chat(
       )}
 
       <div className="flex-shrink-0 bg-white dark:bg-neutral-900 border-t border-neutral-200 dark:border-neutral-800">
+        {inferenceMode && inferenceMode !== "cloud" && (
+          <div className="max-w-2xl mx-auto">
+            <InferenceBadge inferenceMode={inferenceMode} browserStatus={browserStatus} />
+          </div>
+        )}
         <form onSubmit={submitHandler} className="max-w-2xl mx-auto px-4 py-3">
           {models && models.length > 0 && onModelChange && (
             <div className="mb-2">