diff --git a/cloudflare-app-builder/src/handlers/preview.ts b/cloudflare-app-builder/src/handlers/preview.ts
index 97b962442a..189b7981eb 100644
--- a/cloudflare-app-builder/src/handlers/preview.ts
+++ b/cloudflare-app-builder/src/handlers/preview.ts
@@ -5,6 +5,124 @@ import type { PreviewDO } from '../preview-do';
 import { getSandbox } from '@cloudflare/sandbox';
 import { switchPort } from '@cloudflare/containers';
 
+/**
+ * Generates a cryptographically secure base64-encoded nonce for CSP.
+ * Uses 16 random bytes (128 bits) encoded as base64.
+ */
+function generateCSPNonce(): string {
+  const bytes = new Uint8Array(16);
+  crypto.getRandomValues(bytes);
+  return btoa(String.fromCharCode(...bytes));
+}
+
+/**
+ * Adds a nonce to a CSP directive value.
+ * Handles the special case where 'none' is present (must be replaced, not appended).
+ */
+function addNonceToDirective(value: string, nonceValue: string): string {
+  // If directive contains 'none', replace it with the nonce (since 'none' must be alone)
+  if (value.includes("'none'")) {
+    return value.replace("'none'", nonceValue);
+  }
+  return `${value} ${nonceValue}`;
+}
+
+/**
+ * Adds a nonce to the script-src directive of a CSP header.
+ * Also updates script-src-elem if present (since it takes precedence for <script> tags).
+ * If script-src doesn't exist, creates it based on default-src.
+ * Handles 'none' by replacing it (since 'none' cannot be combined with other sources).
+ * Returns the modified CSP string.
+ */
+function addNonceToCSP(csp: string, nonce: string): string {
+  const nonceValue = `'nonce-${nonce}'`;
+  const directives = csp
+    .split(';')
+    .map(d => d.trim())
+    .filter(Boolean);
+
+  const directiveMap = new Map<string, string>();
+  for (const directive of directives) {
+    const spaceIndex = directive.indexOf(' ');
+    if (spaceIndex === -1) {
+      directiveMap.set(directive.toLowerCase(), '');
+    } else {
+      const name = directive.slice(0, spaceIndex).toLowerCase();
+      const value = directive.slice(spaceIndex + 1);
+      directiveMap.set(name, value);
+    }
+  }
+
+  if (directiveMap.has('script-src')) {
+    const current = directiveMap.get('script-src') ?? '';
+    directiveMap.set('script-src', addNonceToDirective(current, nonceValue));
+  } else if (directiveMap.has('default-src')) {
+    // Create script-src from default-src and add nonce
+    const defaultSrc = directiveMap.get('default-src') ?? '';
+    directiveMap.set('script-src', addNonceToDirective(defaultSrc, nonceValue));
+  } else {
+    // No script-src or default-src, add script-src with nonce
+    directiveMap.set('script-src', nonceValue);
+  }
+
+  // Also update script-src-elem if present (takes precedence over script-src for <script> tags)
+  if (directiveMap.has('script-src-elem')) {
+    const current = directiveMap.get('script-src-elem') ?? '';
+    directiveMap.set('script-src-elem', addNonceToDirective(current, nonceValue));
+  }
+
+  // Reconstruct CSP string
+  const result: string[] = [];
+  for (const [name, value] of directiveMap) {
+    result.push(value ? `${name} ${value}` : name);
+  }
+  return result.join('; ');
+}
+
+/**
+ * Generates the bridge script tag with the given nonce for CSP compliance.
+ * The script enables URL tracking by sending navigation events to the parent window.
+ * Validates message origins before navigating to prevent unauthorized control.
+ */
+function getPreviewBridgeScript(nonce: string): string {
+  return `<script nonce="${nonce}" data-kilo-preview-bridge>
+(function() {
+  var send = function() {
+    window.parent.postMessage({
+      type: 'kilo-preview-navigation',
+      url: window.location.href,
+      pathname: window.location.pathname
+    }, '*');
+  };
+  send();
+  var wrap = function(fn) {
+    return function() {
+      var result = fn.apply(this, arguments);
+      send();
+      return result;
+    };
+  };
+  history.pushState = wrap(history.pushState);
+  history.replaceState = wrap(history.replaceState);
+  window.addEventListener('popstate', send);
+  window.addEventListener('message', function(e) {
+    // Validate origin: only accept navigation commands from the parent window
+    // and only navigate to URLs on the same origin as the current page
+    if (e.data && e.data.type === 'kilo-preview-navigate' && e.source === window.parent) {
+      try {
+        var targetUrl = new URL(e.data.url);
+        if (targetUrl.origin === window.location.origin) {
+          window.location.href = e.data.url;
+        }
+      } catch (err) {
+        // Invalid URL, ignore
+      }
+    }
+  });
+})();
+</script>`;
+}
+
 function getPreviewDO(appId: string, env: Env): DurableObjectStub<PreviewDO> {
   const id = env.PREVIEW.idFromName(appId);
   return env.PREVIEW.get(id);
@@ -28,7 +146,13 @@ export async function handleGetPreviewStatus(
     const previewStub = getPreviewDO(appId, env);
     const { state, error } = await previewStub.getStatus();
 
-    const previewUrl = state === 'running' ? `https://${appId}.${env.BUILDER_HOSTNAME}` : null;
+    // In dev mode, return URL without subdomain (worker routes based on last accessed project)
+    const previewUrl =
+      state === 'running'
+        ? env.DEV_MODE
+          ? `https://${env.BUILDER_HOSTNAME}`
+          : `https://${appId}.${env.BUILDER_HOSTNAME}`
+        : null;
 
     return new Response(
       JSON.stringify({
@@ -205,6 +329,71 @@ export async function handlePreviewProxy(
 
     try {
       const response = await sandbox.containerFetch(proxyRequest, port);
+
+      // Inject preview bridge script into HTML responses for URL tracking
+      // Uses HTMLRewriter for streaming transformation (avoids buffering entire response)
+      const contentType = response.headers.get('content-type');
+      if (contentType?.includes('text/html')) {
+        // Generate a base64 nonce for CSP-safe script injection
+        const nonce = generateCSPNonce();
+        const bridgeScript = getPreviewBridgeScript(nonce);
+
+        const newHeaders = new Headers(response.headers);
+        newHeaders.delete('content-length');
+        newHeaders.delete('content-encoding');
+
+        // Modify CSP headers to allow our nonced script
+        const csp = response.headers.get('content-security-policy');
+        if (csp) {
+          newHeaders.set('content-security-policy', addNonceToCSP(csp, nonce));
+        }
+        const cspReportOnly = response.headers.get('content-security-policy-report-only');
+        if (cspReportOnly) {
+          newHeaders.set(
+            'content-security-policy-report-only',
+            addNonceToCSP(cspReportOnly, nonce)
+          );
+        }
+
+        // Track whether we've injected the script (only inject once)
+        let injected = false;
+
+        const rewriter = new HTMLRewriter()
+          // Prefer injecting at end of <head> (best practice for scripts)
+          .on('head', {
+            element(element) {
+              if (!injected) {
+                element.append(bridgeScript, { html: true });
+                injected = true;
+              }
+            },
+          })
+          // Fallback: inject at start of <body> if no <head>
+          .on('body', {
+            element(element) {
+              if (!injected) {
+                element.prepend(bridgeScript, { html: true });
+                injected = true;
+              }
+            },
+          })
+          // Final fallback: append to document end if no <head> or <body>
+          .onDocument({
+            end(end) {
+              if (!injected) {
+                end.append(bridgeScript, { html: true });
+              }
+            },
+          });
+
+        const transformedResponse = rewriter.transform(response);
+        return new Response(transformedResponse.body, {
+          status: response.status,
+          statusText: response.statusText,
+          headers: newHeaders,
+        });
+      }
+
       return response;
     } catch (error) {
       logger.error('Container proxy error', formatError(error));
diff --git a/src/components/app-builder/AppBuilderPreview.tsx b/src/components/app-builder/AppBuilderPreview.tsx
index 4025d2500c..520481e0b0 100644
--- a/src/components/app-builder/AppBuilderPreview.tsx
+++ b/src/components/app-builder/AppBuilderPreview.tsx
@@ -8,7 +8,7 @@
 
 'use client';
 
-import { useState, useCallback, useEffect, memo } from 'react';
+import { useState, useCallback, useEffect, useRef, memo } from 'react';
 import Link from 'next/link';
 import {
   Loader2,
@@ -18,6 +18,9 @@ import {
   ExternalLink,
   AlertCircle,
   Rocket,
+  Home,
+  Copy,
+  Check,
 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { cn } from '@/lib/utils';
@@ -111,8 +114,13 @@ function IframeLoadingOverlay() {
 
 type PreviewFrameProps = {
   url: string;
+  currentPath: string;
+  isAtRoot: boolean;
   isFullscreen: boolean;
+  iframeRef: React.RefObject<HTMLIFrameElement | null>;
   onRefresh: () => void;
+  onGoHome: () => void;
+  onCopyUrl: () => Promise<boolean>;
   onToggleFullscreen: () => void;
   onOpenExternal: () => void;
 };
@@ -121,18 +129,50 @@ type PreviewFrameProps = {
  * Preview frame controls bar
  */
 function PreviewControls({
-  url,
+  currentPath,
+  isAtRoot,
   isFullscreen,
   onRefresh,
+  onGoHome,
+  onCopyUrl,
   onToggleFullscreen,
   onOpenExternal,
-}: PreviewFrameProps) {
+}: Omit<PreviewFrameProps, 'url' | 'iframeRef'>) {
+  const [copied, setCopied] = useState(false);
+  const copyTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  // Clear timeout on unmount to prevent setState on unmounted component
+  useEffect(() => {
+    return () => {
+      if (copyTimeoutRef.current) {
+        clearTimeout(copyTimeoutRef.current);
+      }
+    };
+  }, []);
+
+  const handleCopy = useCallback(async () => {
+    const success = await onCopyUrl();
+    if (success) {
+      setCopied(true);
+      if (copyTimeoutRef.current) {
+        clearTimeout(copyTimeoutRef.current);
+      }
+      copyTimeoutRef.current = setTimeout(() => setCopied(false), 1500);
+    }
+  }, [onCopyUrl]);
+
   return (
     <div className="flex items-center justify-between gap-4 border-b px-4 py-2">
       <div className="flex min-w-0 flex-1 items-center gap-2">
-        <span className="text-muted-foreground min-w-0 flex-1 truncate text-xs">{url}</span>
+        <Button variant="ghost" size="sm" onClick={onGoHome} disabled={isAtRoot} title="Go to home">
+          <Home className="h-4 w-4" />
+        </Button>
+        <span className="text-muted-foreground min-w-0 flex-1 truncate text-xs">{currentPath}</span>
       </div>
       <div className="flex items-center gap-1">
+        <Button variant="ghost" size="sm" onClick={handleCopy} title="Copy URL">
+          {copied ? <Check className="h-4 w-4 text-green-500" /> : <Copy className="h-4 w-4" />}
+        </Button>
         <Button variant="ghost" size="sm" onClick={onRefresh} title="Refresh preview">
           <RefreshCw className="h-4 w-4" />
         </Button>
@@ -152,29 +192,22 @@ function PreviewControls({
   );
 }
 
-const isDev = process.env.NODE_ENV === 'development';
-
-/** In dev, remove subdomain: "https://app-id.builder.kiloapps.io/path" -> "https://builder.kiloapps.io/" */
-function getPreviewUrl(url: string): string {
-  if (!isDev) return url;
-  try {
-    const parsed = new URL(url);
-    const parts = parsed.hostname.split('.');
-    if (parts.length > 2) {
-      parsed.hostname = parts.slice(1).join('.');
-    }
-    parsed.pathname = '/';
-    return parsed.toString();
-  } catch {
-    return url;
-  }
-}
-
 /**
  * Preview iframe with controls - renders dev or production iframe based on environment
  */
 function PreviewFrame(props: PreviewFrameProps) {
-  const { url, isFullscreen } = props;
+  const {
+    url,
+    currentPath,
+    isAtRoot,
+    isFullscreen,
+    iframeRef,
+    onRefresh,
+    onGoHome,
+    onCopyUrl,
+    onToggleFullscreen,
+    onOpenExternal,
+  } = props;
   const [isIframeLoading, setIsIframeLoading] = useState(true);
 
   // Reset loading state when URL changes
@@ -188,11 +221,21 @@ function PreviewFrame(props: PreviewFrameProps) {
 
   return (
     <div className={cn('flex h-full flex-col', isFullscreen && 'bg-background fixed inset-0 z-50')}>
-      <PreviewControls {...props} />
+      <PreviewControls
+        currentPath={currentPath}
+        isAtRoot={isAtRoot}
+        isFullscreen={isFullscreen}
+        onRefresh={onRefresh}
+        onGoHome={onGoHome}
+        onCopyUrl={onCopyUrl}
+        onToggleFullscreen={onToggleFullscreen}
+        onOpenExternal={onOpenExternal}
+      />
       <div className="relative flex-1">
         {isIframeLoading && <IframeLoadingOverlay />}
         <iframe
-          src={getPreviewUrl(url)}
+          ref={iframeRef}
+          src={url}
           className="h-full w-full border-0"
           sandbox="allow-scripts allow-same-origin allow-forms allow-popups"
           title="App Preview"
@@ -311,6 +354,15 @@ function DeploymentControls({ state, onDeploy }: { state: DeploymentState; onDep
   }
 }
 
+/** Extract pathname from URL, stripping query params */
+function getPathFromUrl(url: string): string {
+  try {
+    return new URL(url).pathname;
+  } catch {
+    return '/';
+  }
+}
+
 /**
  * Main preview component
  */
@@ -319,12 +371,59 @@ export const AppBuilderPreview = memo(function AppBuilderPreview({
 }: AppBuilderPreviewProps) {
   // Get state and manager from ProjectSession context
   const { manager, state } = useProject();
-  const { previewUrl, previewStatus, deploymentId } = state;
+  const { previewUrl, previewStatus, deploymentId, currentIframeUrl } = state;
   const projectId = manager.projectId;
 
   const [isFullscreen, setIsFullscreen] = useState(false);
   const [iframeKey, setIframeKey] = useState(0);
   const [isCreatingDeployment, setIsCreatingDeployment] = useState(false);
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+
+  // Derive current path from tracked URL or fall back to previewUrl
+  const currentPath = currentIframeUrl
+    ? getPathFromUrl(currentIframeUrl)
+    : previewUrl
+      ? getPathFromUrl(previewUrl)
+      : '/';
+  const isAtRoot = currentPath === '/';
+
+  // Listen for postMessage navigation events from the preview iframe
+  useEffect(() => {
+    const handleMessage = (event: MessageEvent) => {
+      // Validate origin: only accept messages from the preview iframe's origin
+      // and verify the message comes from the iframe's content window
+      if (!previewUrl) return;
+      let previewOrigin: string;
+      try {
+        previewOrigin = new URL(previewUrl).origin;
+      } catch {
+        return;
+      }
+      if (event.origin !== previewOrigin) return;
+      if (event.source !== iframeRef.current?.contentWindow) return;
+
+      if (event.data?.type === 'kilo-preview-navigation') {
+        // Validate that the reported URL's origin matches the preview origin
+        // to prevent a compromised app from injecting arbitrary external URLs
+        try {
+          const reportedUrl = event.data.url;
+          if (typeof reportedUrl === 'string' && new URL(reportedUrl).origin === previewOrigin) {
+            manager.setCurrentIframeUrl(reportedUrl);
+          }
+        } catch {
+          // Invalid URL, ignore
+        }
+      }
+    };
+
+    window.addEventListener('message', handleMessage);
+    return () => window.removeEventListener('message', handleMessage);
+  }, [manager, previewUrl]);
+
+  // Reset currentIframeUrl when previewUrl changes
+  useEffect(() => {
+    manager.setCurrentIframeUrl(null);
+  }, [previewUrl, manager]);
 
   // Get tRPC for queries
   const trpc = useTRPC();
@@ -385,19 +484,51 @@ export const AppBuilderPreview = memo(function AppBuilderPreview({
   }, [previewUrl, previewStatus]);
 
   const handleRefresh = useCallback(() => {
+    manager.setCurrentIframeUrl(null);
     setIframeKey(prev => prev + 1);
-  }, []);
+  }, [manager]);
 
   const handleToggleFullscreen = useCallback(() => {
     setIsFullscreen(prev => !prev);
   }, []);
 
   const handleOpenExternal = useCallback(() => {
-    if (previewUrl) {
-      window.open(previewUrl, '_blank');
+    const urlToOpen = currentIframeUrl || previewUrl;
+    if (urlToOpen) {
+      window.open(urlToOpen, '_blank', 'noopener,noreferrer');
+    }
+  }, [currentIframeUrl, previewUrl]);
+
+  const handleGoHome = useCallback(() => {
+    if (previewUrl && iframeRef.current?.contentWindow) {
+      try {
+        const baseUrl = new URL(previewUrl);
+        baseUrl.pathname = '/';
+        baseUrl.search = '';
+        iframeRef.current.contentWindow.postMessage(
+          { type: 'kilo-preview-navigate', url: baseUrl.toString() },
+          baseUrl.origin
+        );
+      } catch {
+        // Invalid previewUrl, ignore
+      }
     }
   }, [previewUrl]);
 
+  const handleCopyUrl = useCallback(async (): Promise<boolean> => {
+    const urlToCopy = currentIframeUrl || previewUrl;
+    if (urlToCopy) {
+      try {
+        await navigator.clipboard.writeText(urlToCopy);
+        return true;
+      } catch {
+        toast.error('Failed to copy URL to clipboard');
+        return false;
+      }
+    }
+    return false;
+  }, [currentIframeUrl, previewUrl]);
+
   // Handle deploy using ProjectManager
   const handleDeploy = useCallback(async () => {
     setIsCreatingDeployment(true);
@@ -445,8 +576,13 @@ export const AppBuilderPreview = memo(function AppBuilderPreview({
           <PreviewFrame
             key={iframeKey}
             url={previewUrl}
+            currentPath={currentPath}
+            isAtRoot={isAtRoot}
             isFullscreen={isFullscreen}
+            iframeRef={iframeRef}
             onRefresh={handleRefresh}
+            onGoHome={handleGoHome}
+            onCopyUrl={handleCopyUrl}
             onToggleFullscreen={handleToggleFullscreen}
             onOpenExternal={handleOpenExternal}
           />
diff --git a/src/components/app-builder/ProjectManager.ts b/src/components/app-builder/ProjectManager.ts
index 03e7e9801d..2e5d057b5d 100644
--- a/src/components/app-builder/ProjectManager.ts
+++ b/src/components/app-builder/ProjectManager.ts
@@ -41,6 +41,8 @@ export type ProjectState = {
   previewStatus: PreviewStatus;
   deploymentId: string | null;
   model: string;
+  /** Current URL the user is viewing in the preview iframe (tracked via postMessage) */
+  currentIframeUrl: string | null;
 };
 
 export type ProjectManagerConfig = {
@@ -175,6 +177,14 @@ export class ProjectManager {
     this.streamingCoordinator.sendMessage(message, images, model);
   }
 
+  /**
+   * Update the current iframe URL (called from preview component via postMessage listener).
+   * @param url - The current URL in the preview iframe, or null to clear
+   */
+  setCurrentIframeUrl(url: string | null): void {
+    this.store.setState({ currentIframeUrl: url });
+  }
+
   /** Interrupt the current streaming response. */
   interrupt(): void {
     this.streamingCoordinator.interrupt();
diff --git a/src/components/app-builder/project-manager/__tests__/messages.test.ts b/src/components/app-builder/project-manager/__tests__/messages.test.ts
index eac128e8fd..adc54b1ee3 100644
--- a/src/components/app-builder/project-manager/__tests__/messages.test.ts
+++ b/src/components/app-builder/project-manager/__tests__/messages.test.ts
@@ -22,6 +22,7 @@ function createMockStore(initialMessages: CloudMessage[] = []): ProjectStore {
       previewStatus: 'idle' as const,
       deploymentId: null,
       model: 'anthropic/claude-sonnet-4',
+      currentIframeUrl: null,
     }),
     setState: jest.fn(partial => {
       if (partial.messages) {
diff --git a/src/components/app-builder/project-manager/__tests__/preview-polling.test.ts b/src/components/app-builder/project-manager/__tests__/preview-polling.test.ts
index 90f7db65a6..d543dc44b5 100644
--- a/src/components/app-builder/project-manager/__tests__/preview-polling.test.ts
+++ b/src/components/app-builder/project-manager/__tests__/preview-polling.test.ts
@@ -18,6 +18,7 @@ function createMockStore(): ProjectStore & { stateUpdates: Array<Record<string,
     previewStatus: 'idle',
     deploymentId: null,
     model: 'anthropic/claude-sonnet-4',
+    currentIframeUrl: null,
   };
 
   return {
diff --git a/src/components/app-builder/project-manager/__tests__/store.test.ts b/src/components/app-builder/project-manager/__tests__/store.test.ts
index 8ea06bc6d3..ee91735aa5 100644
--- a/src/components/app-builder/project-manager/__tests__/store.test.ts
+++ b/src/components/app-builder/project-manager/__tests__/store.test.ts
@@ -53,6 +53,7 @@ describe('createProjectStore', () => {
     previewStatus: 'idle',
     deploymentId: null,
     model: 'anthropic/claude-sonnet-4',
+    currentIframeUrl: null,
   };
 
   describe('getState', () => {
diff --git a/src/components/app-builder/project-manager/__tests__/streaming.test.ts b/src/components/app-builder/project-manager/__tests__/streaming.test.ts
index 0313db64a5..08185c02a2 100644
--- a/src/components/app-builder/project-manager/__tests__/streaming.test.ts
+++ b/src/components/app-builder/project-manager/__tests__/streaming.test.ts
@@ -35,6 +35,7 @@ function createMockStore(): ProjectStore & { stateUpdates: Array<Record<string,
     previewStatus: 'idle',
     deploymentId: null,
     model: 'anthropic/claude-sonnet-4',
+    currentIframeUrl: null,
   };
 
   return {
diff --git a/src/components/app-builder/project-manager/store.ts b/src/components/app-builder/project-manager/store.ts
index eec9e47e4e..8fe44f6e77 100644
--- a/src/components/app-builder/project-manager/store.ts
+++ b/src/components/app-builder/project-manager/store.ts
@@ -28,6 +28,7 @@ export function createInitialState(
     previewStatus: 'idle',
     deploymentId,
     model: modelId ?? 'anthropic/claude-sonnet-4',
+    currentIframeUrl: null,
   };
 }
 
diff --git a/src/components/app-builder/project-manager/types.ts b/src/components/app-builder/project-manager/types.ts
index 5f718e6297..c9ff088cdd 100644
--- a/src/components/app-builder/project-manager/types.ts
+++ b/src/components/app-builder/project-manager/types.ts
@@ -29,6 +29,8 @@ export type ProjectState = {
   previewStatus: PreviewStatus;
   deploymentId: string | null;
   model: string;
+  /** Current URL the user is viewing in the preview iframe (tracked via postMessage) */
+  currentIframeUrl: string | null;
 };
 
 // =============================================================================