veryfront 0.1.13 → 0.1.15

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">

package/src/src/sandbox/index.ts

@@ -0,0 +1,32 @@
+/**
+ * Sandbox module for ephemeral compute environments.
+ *
+ * Provides the `Sandbox` class for creating and interacting with
+ * isolated execution environments, and re-exports `createBashTool`
+ * for AI agent integration.
+ *
+ * @example
+ * ```ts
+ * import { Sandbox } from "veryfront/sandbox";
+ *
+ * const sandbox = await Sandbox.create({ authToken: userJwt });
+ * const result = await sandbox.executeCommand("echo hello");
+ * console.log(result.stdout); // "hello\n"
+ * await sandbox.close();
+ * ```
+ *
+ * @example With bash-tool for AI agents:
+ * ```ts
+ * import { Sandbox, createBashTool } from "veryfront/sandbox";
+ *
+ * const sandbox = await Sandbox.create({ authToken });
+ * const { tools } = await createBashTool({ sandbox });
+ * // Pass tools to agent...
+ * ```
+ *
+ * @module
+ */
+import "../../_dnt.polyfills.js";
+
+
+export { type ExecResult, type ExecStreamEvent, Sandbox, type SandboxOptions } from "./sandbox.js";

package/src/src/sandbox/sandbox.ts

@@ -0,0 +1,236 @@
+/**
+ * Sandbox client SDK for ephemeral compute environments.
+ *
+ * Implements the bash-tool Sandbox interface for seamless integration
+ * with AI agent tool loops.
+ *
+ * @module
+ */
+import * as dntShim from "../../_dnt.shims.js";
+
+
+export interface SandboxOptions {
+  /** Base URL of the Veryfront API. Defaults to VERYFRONT_API_URL env. */
+  apiUrl?: string;
+  /** User's JWT for authentication. */
+  authToken: string;
+}
+
+export interface ExecResult {
+  stdout: string;
+  stderr: string;
+  exitCode: number;
+}
+
+export interface ExecStreamEvent {
+  type: "stdout" | "stderr" | "exit" | "error";
+  data?: string;
+  exitCode?: number;
+}
+
+export class Sandbox {
+  private constructor(
+    private endpoint: string,
+    private sessionId: string,
+    private authToken: string,
+    private apiUrl: string,
+  ) {}
+
+  /** Create a new sandbox session. Claims a warm pod or creates a new one. */
+  static async create(options: SandboxOptions): Promise<Sandbox> {
+    const apiUrl = options.apiUrl ||
+      (typeof dntShim.Deno !== "undefined"
+        ? dntShim.Deno.env.get("VERYFRONT_API_URL")
+        : process.env.VERYFRONT_API_URL) ||
+      "https://api.veryfront.com";
+
+    const res = await dntShim.fetch(`${apiUrl}/sandbox-sessions`, {
+      method: "POST",
+      headers: {
+        Authorization: `Bearer ${options.authToken}`,
+        "Content-Type": "application/json",
+      },
+    });
+
+    if (!res.ok) {
+      throw new Error(`Failed to create sandbox: ${res.status} ${await res.text()}`);
+    }
+
+    const { id, endpoint, status } = await res.json();
+
+    // If not yet running, poll until ready
+    if (status !== "running") {
+      await Sandbox.waitForReady(apiUrl, id, options.authToken);
+    }
+
+    return new Sandbox(endpoint, id, options.authToken, apiUrl);
+  }
+
+  /** Reconnect to an existing sandbox session. */
+  static async get(id: string, options: SandboxOptions): Promise<Sandbox> {
+    const apiUrl = options.apiUrl ||
+      (typeof dntShim.Deno !== "undefined"
+        ? dntShim.Deno.env.get("VERYFRONT_API_URL")
+        : process.env.VERYFRONT_API_URL) ||
+      "https://api.veryfront.com";
+
+    const res = await dntShim.fetch(`${apiUrl}/sandbox-sessions/${id}`, {
+      headers: { Authorization: `Bearer ${options.authToken}` },
+    });
+
+    if (!res.ok) {
+      throw new Error(`Failed to get sandbox: ${res.status} ${await res.text()}`);
+    }
+
+    const { endpoint } = await res.json();
+    return new Sandbox(endpoint, id, options.authToken, apiUrl);
+  }
+
+  private static async waitForReady(
+    apiUrl: string,
+    id: string,
+    authToken: string,
+    maxWaitMs = 60_000,
+    pollIntervalMs = 2_000,
+  ): Promise<void> {
+    const start = Date.now();
+    while (Date.now() - start < maxWaitMs) {
+      await new Promise((r) => dntShim.setTimeout(r, pollIntervalMs));
+
+      const res = await dntShim.fetch(`${apiUrl}/sandbox-sessions/${id}`, {
+        headers: { Authorization: `Bearer ${authToken}` },
+      });
+
+      if (res.ok) {
+        const data = await res.json();
+        if (data.status === "running") return;
+        if (data.status === "error" || data.status === "deleting") {
+          throw new Error(`Sandbox failed to start: status=${data.status}`);
+        }
+      }
+    }
+    throw new Error("Sandbox did not become ready within timeout");
+  }
+
+  /** Execute a bash command in the sandbox and return buffered result. */
+  async executeCommand(command: string): Promise<ExecResult> {
+    let stdout = "";
+    let stderr = "";
+    let exitCode = 1;
+
+    for await (const event of this.executeStream(command)) {
+      switch (event.type) {
+        case "stdout":
+          stdout += event.data ?? "";
+          break;
+        case "stderr":
+          stderr += event.data ?? "";
+          break;
+        case "exit":
+          exitCode = event.exitCode ?? 1;
+          break;
+      }
+    }
+
+    return { stdout, stderr, exitCode };
+  }
+
+  /** Execute a bash command with streaming output (NDJSON). */
+  async *executeStream(command: string): AsyncGenerator<ExecStreamEvent> {
+    const res = await dntShim.fetch(`${this.endpoint}/exec`, {
+      method: "POST",
+      headers: {
+        Authorization: `Bearer ${this.authToken}`,
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ command }),
+    });
+
+    if (!res.ok) {
+      throw new Error(`Exec failed: ${res.status} ${await res.text()}`);
+    }
+
+    const reader = res.body!.getReader();
+    const decoder = new TextDecoder();
+    let buffer = "";
+
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+
+      buffer += decoder.decode(value, { stream: true });
+      const lines = buffer.split("\n");
+      buffer = lines.pop()!;
+
+      for (const line of lines) {
+        if (line.trim()) {
+          yield JSON.parse(line) as ExecStreamEvent;
+        }
+      }
+    }
+
+    if (buffer.trim()) {
+      yield JSON.parse(buffer) as ExecStreamEvent;
+    }
+  }
+
+  /** Read a file from the sandbox workspace. */
+  async readFile(path: string): Promise<string> {
+    const res = await dntShim.fetch(
+      `${this.endpoint}/file?path=${encodeURIComponent(path)}`,
+      {
+        headers: { Authorization: `Bearer ${this.authToken}` },
+      },
+    );
+
+    if (!res.ok) {
+      throw new Error(`Read file failed: ${res.status} ${await res.text()}`);
+    }
+
+    return res.text();
+  }
+
+  /** Write files to the sandbox workspace. */
+  async writeFiles(
+    files: Array<{ path: string; content: string }>,
+  ): Promise<void> {
+    const res = await dntShim.fetch(`${this.endpoint}/files`, {
+      method: "POST",
+      headers: {
+        Authorization: `Bearer ${this.authToken}`,
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ files }),
+    });
+
+    if (!res.ok) {
+      throw new Error(`Write files failed: ${res.status} ${await res.text()}`);
+    }
+  }
+
+  /** Send a heartbeat to prevent idle timeout. */
+  async heartbeat(): Promise<void> {
+    await dntShim.fetch(`${this.apiUrl}/sandbox-sessions/${this.sessionId}/heartbeat`, {
+      method: "POST",
+      headers: { Authorization: `Bearer ${this.authToken}` },
+    });
+  }
+
+  /** Close the sandbox session and mark for deletion. */
+  async close(): Promise<void> {
+    await dntShim.fetch(`${this.apiUrl}/sandbox-sessions/${this.sessionId}`, {
+      method: "DELETE",
+      headers: { Authorization: `Bearer ${this.authToken}` },
+    });
+  }
+
+  /** Get the session ID. */
+  get id(): string {
+    return this.sessionId;
+  }
+
+  /** Get the sandbox endpoint URL. */
+  get url(): string {
+    return this.endpoint;
+  }
+}

package/src/src/transforms/pipeline/stages/ssr-vf-modules/import-finder.ts

@@ -26,10 +26,17 @@ export function findVfModuleImports(code: string): string[] {
  */
 export function findRelativeImports(code: string): string[] {
   const imports: string[] = [];
-  const pattern = /from\s*["'](\.\.?\/[^"']+)["']/g;
+
+  // Match: from "./foo" or from "../bar"
+  const fromPattern = /from\s*["'](\.\.?\/[^"']+)["']/g;
+  // Match side-effect imports: import "./foo" or import "../bar" (no `from`)
+  const sideEffectPattern = /import\s*["'](\.\.?\/[^"']+)["']/g;
 
   let match: RegExpExecArray | null;
-  while ((match = pattern.exec(code)) !== null) {
+  while ((match = fromPattern.exec(code)) !== null) {
+    imports.push(match[1]!);
+  }
+  while ((match = sideEffectPattern.exec(code)) !== null) {
     imports.push(match[1]!);
   }
 

package/src/src/transforms/pipeline/stages/ssr-vf-modules/index.ts

@@ -85,6 +85,7 @@ export const _testExports = {
   resolveVeryfrontSourcePath,
   resolveAndTransformVeryfrontImport,
   FRAMEWORK_ROOT,
+  EMBEDDED_SRC_DIR,
   EXTENSIONS,
 };